@snack-uikit/accordion 0.5.9 → 0.6.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.6.0 (2024-02-21)
+
+
+### Features
+
+* **FF-4296:** add outline prop into CollapseBlockPrimary ([91c7e82](https://github.com/cloud-ru-tech/snack-uikit/commit/91c7e82064ed123e51075478ad2718f00d3f50cf))
+
+
+
+
+
 ## 0.5.9 (2024-02-20)
 
 ### Only dependencies have been changed

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

@@ -1,2 +1,2 @@
-import { CollapseBlockProps } from '../../types';
-export declare function CollapseBlockPrimary({ id, header, children, actions, className, ...rest }: CollapseBlockProps): import("react/jsx-runtime").JSX.Element;
+import { CollapseBlockPrimaryProps } from '../../types';
+export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, ...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 } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className"]);
+    var { id, header, children, actions, className, outline } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline"]);
     const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
-    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, 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), 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,3 +1,11 @@
+.containerBase{
+  max-width:100%;
+  background-color:var(--sys-neutral-background1-level, #fafafc);
+}
+.containerBase:focus-within, .containerBase:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+}
+
 .container{
   padding-top:var(--space-accordion-collapse-block-primary-vertical-padding, 32px);
   padding-bottom:var(--space-accordion-collapse-block-primary-vertical-padding, 32px);
@@ -5,10 +13,24 @@
   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);
-  max-width:100%;
-  background-color:var(--sys-neutral-background1-level, #fafafc);
 }
 .container:focus-within, .container:hover{
-  background-color:var(--sys-neutral-background2-level, #ffffff);
   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));
+}
+
+.containerOutline{
+  padding-top:var(--space-accordion-collapse-block-primary-vertical-padding, 32px);
+  padding-bottom:var(--space-accordion-collapse-block-primary-vertical-padding, 32px);
+  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);
+  outline-style:solid;
+  outline-width:var(--border-width-accordion-collapse-block-primary, 1px);
+}
+.containerOutline:focus-within, .containerOutline:hover{
+  outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }

package/dist/components/CollapseBlockSecondary/CollapseBlockSecondary.d.ts

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

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { SELECTION_MODE } from './constants';
-export type CollapseBlockProps = WithSupportProps<{
+export type CollapseBlockSecondaryProps = WithSupportProps<{
     /** Уникальный id блока */
     id: string;
     /** Заголовок */
@@ -13,6 +13,11 @@ export type CollapseBlockProps = WithSupportProps<{
     /** CSS-класс */
     className?: string;
 }>;
+export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
+    /** Внешний бордер  */
+    outline?: boolean;
+};
+export type CollapseBlockProps = CollapseBlockPrimaryProps | CollapseBlockSecondaryProps;
 export type AccordionProps = WithSupportProps<{
     /** Вложенный контент */
     children: ReactElement<CollapseBlockProps> | ReactElement<CollapseBlockProps>[];

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Accordion",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
+  "gitHead": "3e7a22f46aa4c135fababaf8d147bdf860a37e39"
 }

package/src/components/CollapseBlockPrimary/CollapseBlockPrimary.tsx

@@ -4,15 +4,27 @@ import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
-import { CollapseBlockProps } from '../../types';
+import { CollapseBlockPrimaryProps } from '../../types';
 import styles from './styles.module.scss';
 
-export function CollapseBlockPrimary({ id, header, children, actions, className, ...rest }: CollapseBlockProps) {
+export function CollapseBlockPrimary({
+  id,
+  header,
+  children,
+  actions,
+  className,
+  outline,
+  ...rest
+}: CollapseBlockPrimaryProps) {
   const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
 
   return (
     <CollapseBlockPrivate
-      className={cn(styles.container, className)}
+      className={cn(
+        styles.containerBase,
+        { [styles.container]: !outline, [styles.containerOutline]: outline },
+        className,
+      )}
       header={
         <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
           {header}

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

@@ -1,14 +1,33 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
 
-.container {
-  @include composite-var($collapse-block-container-primary);
-
+.containerBase {
   max-width: 100%;
   background-color: $sys-neutral-background1-level;
 
   &:focus-within,
-  &:hover{
+  &:hover {
     background-color: $sys-neutral-background2-level;
+  }
+}
+
+.container {
+  @include composite-var($collapse-block-container-primary);
+
+  &:focus-within,
+  &:hover {
     box-shadow: $box-shadow-elevation-level2;
   }
 }
+
+.containerOutline {
+  @include composite-var($collapse-block-container-primary-outline);
+
+  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/components/CollapseBlockSecondary/CollapseBlockSecondary.tsx

@@ -4,10 +4,17 @@ import { useToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
-import { CollapseBlockProps } from '../../types';
+import { CollapseBlockSecondaryProps } from '../../types';
 import styles from './styles.module.scss';
 
-export function CollapseBlockSecondary({ header, children, id, actions, className, ...rest }: CollapseBlockProps) {
+export function CollapseBlockSecondary({
+  header,
+  children,
+  id,
+  actions,
+  className,
+  ...rest
+}: CollapseBlockSecondaryProps) {
   const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
 
   return (

package/src/types.ts

@@ -4,7 +4,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { SELECTION_MODE } from './constants';
 
-export type CollapseBlockProps = WithSupportProps<{
+export type CollapseBlockSecondaryProps = WithSupportProps<{
   /** Уникальный id блока */
   id: string;
   /** Заголовок */
@@ -17,6 +17,13 @@ export type CollapseBlockProps = WithSupportProps<{
   className?: string;
 }>;
 
+export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
+  /** Внешний бордер  */
+  outline?: boolean;
+};
+
+export type CollapseBlockProps = CollapseBlockPrimaryProps | CollapseBlockSecondaryProps;
+
 export type AccordionProps = WithSupportProps<{
   /** Вложенный контент */
   children: ReactElement<CollapseBlockProps> | ReactElement<CollapseBlockProps>[];