feat(plasma-b2c,star-ds): Add FocusContainer component

salute-developers · Nov 11, 2024 · 1211b6c · 1211b6c
1 parent 6a5eac1
commit 1211b6c
Show file tree

Hide file tree

Showing 12 changed files with 288 additions and 2 deletions.
diff --git a/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.config.ts b/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.config.ts
@@ -0,0 +1,16 @@
+import { Theme } from '@salutejs/core-components';
+
+import { PlasmaB2CTheme } from '../ThemeProvider';
+
+export const getConfig = ({ data, mode }: Theme<PlasmaB2CTheme>) => ({
+    defaults: {},
+    variations: {
+        focused: {
+            true: {
+                focusedTextColor: data.color[mode].onLightTextPrimary,
+                focusedBackgroundColor: data.color[mode].onDarkSurfaceSolidDefault,
+                focusedScale: 1.05,
+            },
+        },
+    },
+});
diff --git a/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.stories.tsx b/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.stories.tsx
@@ -0,0 +1,81 @@
+import { Text, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Checkbox } from '../Checkbox';
+import { BodyM, H2 } from '../Typography';
+
+import { FocusContainer } from './FocusContainer';
+
+type StoryFocusContainerProps = ComponentProps<typeof FocusContainer>;
+
+const notes = `
+| **Control**              | **Description**          | **Default** |
+|--------------------------|--------------------------|-------------|
+| unfocusedBackgroundColor | Фон карточки в не фокуса |             |
+| unfocusedTextColor       | Текст кнопки в не фокуса |             |
+`;
+
+const meta: Meta<StoryFocusContainerProps> = {
+    title: 'Components/FocusContainer',
+    component: FocusContainer,
+    parameters: {
+        notes,
+    },
+    args: {
+        unfocusedBackgroundColor: '#ffffff1f',
+        unfocusedTextColor: 'lightblue',
+    },
+};
+
+export default meta;
+
+const StoryDefault = (props: StoryFocusContainerProps) => {
+    return (
+        <FocusContainer
+            unfocusedBackgroundColor={props.unfocusedBackgroundColor}
+            unfocusedTextColor={props.unfocusedTextColor}
+        >
+            {({ focusedBackgroundColor, focused, focusedScale, focusedTextColor }) => {
+                const styles = {
+                    root: {
+                        width: 300,
+                        height: 150,
+                        padding: 16,
+                    },
+                    background: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
+                        borderRadius: 16,
+                        backgroundColor: focusedBackgroundColor,
+                        transform: [
+                            {
+                                scale: focusedScale,
+                            },
+                        ],
+                    } as any,
+                    text: {
+                        color: focusedTextColor,
+                    },
+                };
+
+                return (
+                    <View style={styles.root}>
+                        <View style={styles.background} />
+                        <Text style={styles.text}>Text</Text>
+                        <Checkbox label="Label" focused={focused} />
+                        <H2 focused={focused}>Title</H2>
+                        <BodyM focused={focused}>Subtitle</BodyM>
+                    </View>
+                );
+            }}
+        </FocusContainer>
+    );
+};
+
+export const Default: StoryObj<StoryFocusContainerProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
diff --git a/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.ts b/libraries/plasma-b2c/src/components/FocusContainer/FocusContainer.ts
@@ -0,0 +1,5 @@
+import { focusContainerComponent } from '@salutejs/core-components';
+
+import { getConfig } from './FocusContainer.config';
+
+export const FocusContainer = focusContainerComponent(getConfig);
diff --git a/libraries/plasma-b2c/src/components/FocusContainer/index.ts b/libraries/plasma-b2c/src/components/FocusContainer/index.ts
@@ -0,0 +1 @@
+export { FocusContainer } from './FocusContainer';
diff --git a/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx b/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx
@@ -11,10 +11,11 @@ import { LineSkeleton } from '../Skeleton';
 import { Switch } from '../Switch';
 import { Spinner } from '../Spinner';
 import { TextField } from '../TextField';
-import { BodyL } from '../Typography';
+import { BodyL, BodyM, H2 } from '../Typography';
 import { Cell } from '../Cell';
 import { List } from '../List';
 import { IconButton } from '../IconButton';
+import { FocusContainer } from '../FocusContainer';
 
 interface IconSvgProps {
     size?: number;
@@ -49,6 +50,44 @@ const StoryDefault = () => {
 
     return (
         <View style={{ display: 'flex', gap: 10, padding: 50, width: '50%' }}>
+            <FocusContainer unfocusedBackgroundColor="#ffffff1f" unfocusedTextColor="lightblue">
+                {({ focusedBackgroundColor, focused, focusedScale, focusedTextColor }) => {
+                    const styles = {
+                        root: {
+                            width: 300,
+                            height: 150,
+                            padding: 16,
+                        },
+                        background: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            bottom: 0,
+                            right: 0,
+                            borderRadius: 16,
+                            backgroundColor: focusedBackgroundColor,
+                            transform: [
+                                {
+                                    scale: focusedScale,
+                                },
+                            ],
+                        } as any,
+                        text: {
+                            color: focusedTextColor,
+                        },
+                    };
+
+                    return (
+                        <View style={styles.root}>
+                            <View style={styles.background} />
+                            <Text style={styles.text}>Text</Text>
+                            <Checkbox label="Label" focused={focused} />
+                            <H2 focused={focused}>Title</H2>
+                            <BodyM focused={focused}>Subtitle</BodyM>
+                        </View>
+                    );
+                }}
+            </FocusContainer>
             <Button text="Button 2" contentLeft={<PlasmaIcon />} />
             <IconButton>
                 <PlasmaIcon />

diff --git a/libraries/plasma-b2c/src/index.prod.ts b/libraries/plasma-b2c/src/index.prod.ts
@@ -2,6 +2,7 @@ export * from './components/Button';
 export * from './components/Carousel';
 export * from './components/Cell';
 export * from './components/Checkbox';
+export * from './components/FocusContainer';
 export * from './components/List';
 export * from './components/IconButton';
 export * from './components/Skeleton';

diff --git a/libraries/star-ds/src/components/FocusContainer/FocusContainer.config.ts b/libraries/star-ds/src/components/FocusContainer/FocusContainer.config.ts
@@ -0,0 +1,16 @@
+import { Theme } from '@salutejs/core-components';
+
+import { StylesSaluteTheme } from '../ThemeProvider';
+
+export const getConfig = ({ data, mode }: Theme<StylesSaluteTheme>) => ({
+    defaults: {},
+    variations: {
+        focused: {
+            true: {
+                focusedTextColor: data.color[mode].onLightTextPrimary,
+                focusedBackgroundColor: data.color[mode].onDarkSurfaceSolidDefault,
+                focusedScale: 1.05,
+            },
+        },
+    },
+});
diff --git a/libraries/star-ds/src/components/FocusContainer/FocusContainer.stories.tsx b/libraries/star-ds/src/components/FocusContainer/FocusContainer.stories.tsx
@@ -0,0 +1,81 @@
+import { Text, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Checkbox } from '../Checkbox';
+import { BodyM, H2 } from '../Typography';
+
+import { FocusContainer } from './FocusContainer';
+
+type StoryFocusContainerProps = ComponentProps<typeof FocusContainer>;
+
+const notes = `
+| **Control**              | **Description**          | **Default** |
+|--------------------------|--------------------------|-------------|
+| unfocusedBackgroundColor | Фон карточки в не фокуса |             |
+| unfocusedTextColor       | Текст кнопки в не фокуса |             |
+`;
+
+const meta: Meta<StoryFocusContainerProps> = {
+    title: 'Components/FocusContainer',
+    component: FocusContainer,
+    parameters: {
+        notes,
+    },
+    args: {
+        unfocusedBackgroundColor: '#ffffff1f',
+        unfocusedTextColor: 'lightblue',
+    },
+};
+
+export default meta;
+
+const StoryDefault = (props: StoryFocusContainerProps) => {
+    return (
+        <FocusContainer
+            unfocusedBackgroundColor={props.unfocusedBackgroundColor}
+            unfocusedTextColor={props.unfocusedTextColor}
+        >
+            {({ focusedBackgroundColor, focused, focusedScale, focusedTextColor }) => {
+                const styles = {
+                    root: {
+                        width: 300,
+                        height: 150,
+                        padding: 16,
+                    },
+                    background: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
+                        borderRadius: 16,
+                        backgroundColor: focusedBackgroundColor,
+                        transform: [
+                            {
+                                scale: focusedScale,
+                            },
+                        ],
+                    } as any,
+                    text: {
+                        color: focusedTextColor,
+                    },
+                };
+
+                return (
+                    <View style={styles.root}>
+                        <View style={styles.background} />
+                        <Text style={styles.text}>Text</Text>
+                        <Checkbox label="Label" focused={focused} />
+                        <H2 focused={focused}>Title</H2>
+                        <BodyM focused={focused}>Subtitle</BodyM>
+                    </View>
+                );
+            }}
+        </FocusContainer>
+    );
+};
+
+export const Default: StoryObj<StoryFocusContainerProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
diff --git a/libraries/star-ds/src/components/FocusContainer/FocusContainer.ts b/libraries/star-ds/src/components/FocusContainer/FocusContainer.ts
@@ -0,0 +1,5 @@
+import { focusContainerComponent } from '@salutejs/core-components';
+
+import { getConfig } from './FocusContainer.config';
+
+export const FocusContainer = focusContainerComponent(getConfig);
diff --git a/libraries/star-ds/src/components/FocusContainer/index.ts b/libraries/star-ds/src/components/FocusContainer/index.ts
@@ -0,0 +1 @@
+export { FocusContainer } from './FocusContainer';
diff --git a/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx b/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx
@@ -11,10 +11,11 @@ import { LineSkeleton } from '../Skeleton';
 import { Switch } from '../Switch';
 import { Spinner } from '../Spinner';
 import { TextField } from '../TextField';
-import { BodyL } from '../Typography';
+import { BodyL, BodyM, H2 } from '../Typography';
 import { Cell } from '../Cell';
 import { List } from '../List';
 import { IconButton } from '../IconButton';
+import { FocusContainer } from '../FocusContainer';
 
 interface IconSvgProps {
     size?: number;
@@ -49,6 +50,44 @@ const StoryDefault = () => {
 
     return (
         <View style={{ display: 'flex', gap: 10, padding: 50, width: '50%' }}>
+            <FocusContainer unfocusedBackgroundColor="#ffffff1f" unfocusedTextColor="lightblue">
+                {({ focusedBackgroundColor, focused, focusedScale, focusedTextColor }) => {
+                    const styles = {
+                        root: {
+                            width: 300,
+                            height: 150,
+                            padding: 16,
+                        },
+                        background: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            bottom: 0,
+                            right: 0,
+                            borderRadius: 16,
+                            backgroundColor: focusedBackgroundColor,
+                            transform: [
+                                {
+                                    scale: focusedScale,
+                                },
+                            ],
+                        } as any,
+                        text: {
+                            color: focusedTextColor,
+                        },
+                    };
+
+                    return (
+                        <View style={styles.root}>
+                            <View style={styles.background} />
+                            <Text style={styles.text}>Text</Text>
+                            <Checkbox label="Label" focused={focused} />
+                            <H2 focused={focused}>Title</H2>
+                            <BodyM focused={focused}>Subtitle</BodyM>
+                        </View>
+                    );
+                }}
+            </FocusContainer>
             <Button text="Button 2" contentLeft={<PlasmaIcon />} />
             <IconButton>
                 <PlasmaIcon />

diff --git a/libraries/star-ds/src/index.prod.ts b/libraries/star-ds/src/index.prod.ts
@@ -2,6 +2,7 @@ export * from './components/Button';
 export * from './components/Carousel';
 export * from './components/Cell';
 export * from './components/Checkbox';
+export * from './components/FocusContainer';
 export * from './components/List';
 export * from './components/IconButton';
 export * from './components/Skeleton';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { FocusContainer } from './FocusContainer';