PLASMA-6584: add SegmentIconItem

packages/plasma-new-hope/src/components/Segment/index.ts

@@ -1,5 +1,12 @@
-export { segmentItemConfig, segmentItemRoot, segmentGroupConfig, segmentGroupRoot } from './ui';
-export type { SegmentItemProps, SegmentGroupProps } from './ui';
+export {
+    segmentItemConfig,
+    segmentItemRoot,
+    segmentGroupConfig,
+    segmentGroupRoot,
+    segmentIconItemConfig,
+    segmentIconItemRoot,
+} from './ui';
+export type { SegmentItemProps, SegmentGroupProps, SegmentIconItemProps } from './ui';
 
 export { SegmentProvider, useSegment } from './SegmentProvider';
 export type { SegmentProviderProps } from './SegmentProvider';

packages/plasma-new-hope/src/components/Segment/tokens.ts

@@ -42,6 +42,7 @@ export const tokens = {
     itemPilledPadding: '--plasma-segment-item-pilled-padding',
     itemMarginLeft: '--plasma-segment-item-margin-left',
     itemContentPadding: '--plasma-segment-item-content-padding',
+    iconItemContentPadding: '--plasma-segment-icon-item-content-padding',
     itemIconMargin: '--plasma-segment-item-content-icon-margin',
 
     itemColor: '--plasma-segment-item-color',

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/SegmentIconItem.styles.ts

@@ -0,0 +1,51 @@
+import { styled } from '@linaria/react';
+import { css } from '@linaria/core';
+
+import { addFocus } from '../../../../mixins';
+import { tokens } from '../../tokens';
+
+export const StyledIcon = styled.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    padding: var(${tokens.iconItemContentPadding});
+`;
+
+export const base = css`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 0;
+    white-space: nowrap;
+
+    appearance: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    margin-left: var(${tokens.itemMarginLeft});
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    ${addFocus({
+        outlineSize: '0.063rem',
+        outlineOffset: 'var(--plasma_private-clip-outline-offset)',
+        outlineColor: `var(${tokens.outlineFocusColor})`,
+        outlineRadius: 'calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius))',
+        customFocusRules: `
+            &.focus-visible:focus,
+            &[data-focus-visible-added] {
+                &::before {
+                    z-index: 1;
+                    outline: none;
+                    box-shadow: 0 0 0 0.063rem var(${tokens.outlineFocusColor});
+                }
+            }
+        `,
+    })};
+`;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/SegmentIconItem.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react';
+import type { MouseEvent } from 'react';
+import type { RootProps } from 'src/engines/types';
+import { cx, safeUseId } from 'src/utils';
+
+import { classes } from '../../tokens';
+import { useSegmentInner } from '../../SegmentProvider/SegmentProvider';
+
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as pilledCSS } from './variations/_pilled/base';
+import type { SegmentIconItemProps } from './SegmentIconItem.types';
+import { StyledIcon, base } from './SegmentIconItem.styles';
+
+export const segmentIconItemRoot = (Root: RootProps<HTMLButtonElement, SegmentIconItemProps>) =>
+    forwardRef<HTMLButtonElement, SegmentIconItemProps>((props, outerRef) => {
+        const {
+            style,
+            size,
+            view = 'default',
+            className,
+            id,
+            icon,
+            value,
+            pilled,
+            customHandleSelect,
+            'aria-label': ariaLabelExternal,
+            ...rest
+        } = props;
+        const { disabledGroup, handleSelect, selectedSegmentItems } = useSegmentInner();
+
+        const uniqId = safeUseId();
+        const segmentId = id || `label-${uniqId}`;
+
+        const pilledClass = pilled ? classes.segmentPilled : undefined;
+
+        const isSelected = selectedSegmentItems?.includes(value);
+        const selectedClass = isSelected ? classes.selectedSegmentItem : undefined;
+
+        const handleSelectSegment = (event: MouseEvent<HTMLButtonElement>) => {
+            if (disabledGroup) {
+                return;
+            }
+
+            customHandleSelect?.(event);
+            handleSelect?.(value);
+        };
+
+        return (
+            <Root
+                view={view}
+                size={size}
+                id={segmentId}
+                ref={outerRef}
+                aria-label={ariaLabelExternal || value}
+                value={value}
+                pilled={pilled}
+                className={cx(selectedClass, pilledClass, className)}
+                onClick={handleSelectSegment}
+                tabIndex={disabledGroup ? -1 : 0}
+                disabled={disabledGroup}
+                style={style}
+                {...rest}
+            >
+                <StyledIcon>{icon}</StyledIcon>
+            </Root>
+        );
+    });
+
+export const segmentIconItemConfig = {
+    name: 'SegmentIconItem',
+    tag: 'button',
+    layout: segmentIconItemRoot,
+    base,
+    variations: {
+        size: {
+            css: sizeCSS,
+        },
+        view: {
+            css: viewCSS,
+        },
+        disabled: {
+            css: disabledCSS,
+            attrs: true,
+        },
+        pilled: {
+            css: pilledCSS,
+            attrs: true,
+        },
+    },
+    defaults: {
+        view: 'default',
+        size: 'xs',
+    },
+};

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/SegmentIconItem.types.ts

@@ -0,0 +1,35 @@
+import type { MouseEvent, ButtonHTMLAttributes } from 'react';
+
+type CustomSegmentIconItemProps = {
+    /**
+     * Значение сегмента
+     */
+    value: string;
+    /**
+     * Уникальный идентификатор контрола
+     */
+    id?: string;
+    /**
+     * Иконка
+     */
+    icon?: React.ReactNode;
+    /**
+     * Сегмент c округлым border-radius
+     */
+    pilled?: boolean;
+    /**
+     * Коллбек для обработки выбора сегмента
+     */
+    customHandleSelect?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Размер сегмента
+     */
+    size?: string;
+    /**
+     * Вид сегмента
+     * @default 'default'
+     */
+    view?: string;
+};
+
+export type SegmentIconItemProps = ButtonHTMLAttributes<HTMLButtonElement> & CustomSegmentIconItemProps;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/index.ts

@@ -0,0 +1,2 @@
+export { segmentIconItemConfig, segmentIconItemRoot } from './SegmentIconItem';
+export type { SegmentIconItemProps } from './SegmentIconItem.types';

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_disabled/base.ts

@@ -0,0 +1,19 @@
+import { css } from '@linaria/core';
+
+import { classes, tokens } from '../../../../tokens';
+
+export const base = css`
+    &[disabled] {
+        cursor: not-allowed;
+
+        &:hover {
+            color: var(${tokens.itemColor});
+            background-color: var(${tokens.itemBackgroundColor});
+        }
+
+        &.${String(classes.selectedSegmentItem)}:hover {
+            color: var(${tokens.itemSelectedColor});
+            background-color: var(${tokens.itemSelectedBackgroundColor});
+        }
+    }
+`;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-segment-disabled-opacity"]
+}

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_pilled/base.ts

@@ -0,0 +1,12 @@
+import { css } from '@linaria/core';
+
+import { classes, tokens } from '../../../../tokens';
+
+export const base = css`
+    &.${String(classes.segmentPilled)} {
+        --plasma_private-outline-radius: var(${tokens.itemPilledBorderRadius});
+        border-radius: var(${tokens.itemPilledBorderRadius});
+
+        padding: var(${tokens.itemPilledPadding});
+    }
+`;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_pilled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-segment-item-pilled-border-radius"]
+}

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_size/base.ts

@@ -0,0 +1,17 @@
+import { css } from '@linaria/core';
+
+import { classes, tokens } from '../../../../tokens';
+
+export const base = css`
+    --plasma_private-outline-radius: var(${tokens.itemBorderRadius});
+    border-radius: var(${tokens.itemBorderRadius});
+
+    width: var(${tokens.itemWidth});
+    height: var(${tokens.itemHeight});
+
+    padding: var(${tokens.itemPadding});
+
+    &.${classes.selectedSegmentItem} {
+        font-weight: var(${tokens.fontWeightSelectedItem}, var(${tokens.fontWeight}));
+    }
+`;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_size/tokens.json

@@ -0,0 +1,6 @@
+[
+    "--plasma-segment-item-border-radius",
+    "--plasma-segment-item-width",
+    "--plasma-segment-item-height",
+    "--plasma-segment-item-padding"
+]

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_view/base.ts

@@ -0,0 +1,23 @@
+import { css } from '@linaria/core';
+
+import { classes, tokens } from '../../../../tokens';
+
+export const base = css`
+    color: var(${tokens.itemColor});
+    background-color: var(${tokens.itemBackgroundColor});
+
+    &:hover {
+        color: var(${tokens.itemColorHover});
+        background-color: var(${tokens.itemBackgroundColorHover});
+    }
+
+    &.${classes.selectedSegmentItem} {
+        color: var(${tokens.itemSelectedColor});
+        background-color: var(${tokens.itemSelectedBackgroundColor});
+
+        &:hover {
+            color: var(${tokens.itemSelectedColorHover});
+            background-color: var(${tokens.itemSelectedBackgroundColorHover});
+        }
+    }
+`;

packages/plasma-new-hope/src/components/Segment/ui/SegmentIconItem/variations/_view/tokens.json

@@ -0,0 +1,10 @@
+[
+    "--plasma-segment-item-color",
+    "--plasma-segment-item-background-color",
+    "--plasma-segment-item-color-hover",
+    "--plasma-segment-item-background-color-hover",
+    "--plasma-segment-item-selected-color",
+    "--plasma-segment-item-selected-background-color",
+    "--plasma-segment-item-selected-color-hover",
+    "--plasma-segment-item-selected-background-color-hover"
+]

packages/plasma-new-hope/src/components/Segment/ui/index.ts

@@ -2,3 +2,5 @@ export { segmentGroupConfig, segmentGroupRoot } from './SegmentGroup';
 export type { SegmentGroupProps } from './SegmentGroup';
 export { segmentItemConfig, segmentItemRoot } from './SegmentItem';
 export type { SegmentItemProps } from './SegmentItem';
+export { segmentIconItemConfig, segmentIconItemRoot } from './SegmentIconItem';
+export type { SegmentIconItemProps } from './SegmentIconItem';

packages/plasma-new-hope/src/examples/components/Segment/Segment.stories.tsx

@@ -7,13 +7,14 @@ import { Counter } from '../Counter/Counter';
 import { WithTheme } from '../../_helpers';
 
 import { config } from './SegmentGroup.config';
-import { SegmentItem, SegmentGroup } from './Segment';
+import { SegmentItem, SegmentGroup, SegmentIconItem } from './Segment';
 
 type SegmentGroupProps = ComponentProps<typeof SegmentGroup>;
 
-const { meta: META, Default } = getSegmentStories({
+const { meta: META, Default, IconItem } = getSegmentStories({
     SegmentGroup,
     SegmentItem,
+    SegmentIconItem,
     SegmentProvider,
     componentConfig: config,
     CounterComponent: Counter,
@@ -28,4 +29,4 @@ const meta: Meta<SegmentGroupProps> = {
 
 export default meta;
 
-export { Default };
+export { Default, IconItem };

packages/plasma-new-hope/src/examples/components/Segment/Segment.ts

@@ -1,11 +1,14 @@
-import { segmentItemConfig, segmentGroupConfig } from '../../../components/Segment';
+import { segmentItemConfig, segmentGroupConfig, segmentIconItemConfig } from '../../../components/Segment';
 import { component, mergeConfig } from '../../../engines';
 
 import { config as groupConfig } from './SegmentGroup.config';
 import { config as itemConfig } from './SegmentItem.config';
+import { config as iconItemConfig } from './SegmentIconItem.config';
 
 const mergedSegmentGroupConfig = mergeConfig(segmentGroupConfig, groupConfig);
 const mergedSegmentItemConfig = mergeConfig(segmentItemConfig, itemConfig);
+const mergedSegmentIconItemConfig = mergeConfig(segmentIconItemConfig, iconItemConfig);
 
 export const SegmentGroup = component(mergedSegmentGroupConfig);
 export const SegmentItem = component(mergedSegmentItemConfig);
+export const SegmentIconItem = component(mergedSegmentIconItemConfig);