feat!: refactor Stories component, add props for manage story style

gravity-ui · Sep 23, 2024 · 6f68166 · 6f68166
1 parent 70bf9f0
commit 6f68166
Show file tree

Hide file tree

Showing 15 changed files with 672 additions and 235 deletions.
diff --git a/src/components/Stories/README.md b/src/components/Stories/README.md
@@ -14,24 +14,37 @@ Component for displaying stories. It looks like a carousel in a modal with given
 | onNextClick         | `Function`      |          |         | Action when switching to next story              |
 | disableOutsideClick | `Boolean`       |          | true    | If `true`, do not close stories on click outside |
 | className           | `string`        |          |         | Stories modal class                              |
-| action              | `ButtonProps`   |          |         | Custom action button props for the last step     |
 
 ### StoriesItem object
 
-| Field       | Type               | Required | Default | Description                      |
-| ----------- | ------------------ | -------- | ------- | -------------------------------- |
-| title       | `String`           |          |         | Title                            |
-| description | `String`           |          |         | Main text                        |
-| url         | `String`           |          |         | Link to display more information |
-| media       | `StoriesItemMedia` |          |         | Media content                    |
+| Field           | Type                     | Required | Default | Description                              |
+| --------------- | ------------------------ | -------- | ------- | ---------------------------------------- |
+| title           | `String`                 |          |         | Title                                    |
+| description     | `String`                 |          |         | Main text                                |
+| url             | `String`                 |          |         | Link to display more information         |
+| media           | `StoriesItemMedia`       |          |         | Media content                            |
+| firstAction     | `ButtonProps`            |          |         | Custom action button props               |
+| secondAction    | `ButtonProps`            |          |         | Custom action button props               |
+| textBlockStyle  | `StoriesTextBlockStyle`  | ✓        |         | Props for styling text content in Story  |
+| mediaBlockStyle | `StoriesMediaBlockStyle` | ✓        |         | Props for styling media content in Story |
+| textColorStyles | `StoriesItemTextStyles`  |          |         | Props for styling text color in Story    |
 
 ### StoriesItemMedia object
 
-| Field     | Type     | Required | Default | Description                       |
-| --------- | -------- | -------- | ------- | --------------------------------- |
-| type      | `String` |          | image   | Content type (`image` or `video`) |
-| url       | `String` | ✓        |         | File link                         |
-| posterUrl | `String` |          |         | Poster URL (only used for video)  |
+| Field     | Type     | Required | Default | Description                                        |
+| --------- | -------- | -------- | ------- | -------------------------------------------------- |
+| type      | `String` | ✓        |         | Content type (`image` or `video`)                  |
+| url       | `String` | ✓        |         | File link                                          |
+| url2x     | `String` |          |         | File link for Retina display (only used for image) |
+| posterUrl | `String` |          |         | Poster URL (only used for video)                   |
+
+### StoriesItemTextStyles object
+
+| Field            | Type     | Required | Default | Description                      |
+| ---------------- | -------- | -------- | ------- | -------------------------------- |
+| titleColor       | `String` |          |         | Apply color to Story title       |
+| descriptionColor | `String` |          |         | Apply color to Story description |
+| counterColor     | `String` |          |         | Apply color to Story counter     |
 
 #### Usage example
 
@@ -42,6 +55,7 @@ Component for displaying stories. It looks like a carousel in a modal with given
     {
       title: 'Story title',
       description: 'Story text',
+      type: 'image',
       media: {
         url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-2.png',
       },

diff --git a/src/components/Stories/Stories.scss b/src/components/Stories/Stories.scss
@@ -1,13 +1,16 @@
 @use '../variables';
 
 $block: '.#{variables.$ns}stories';
-$borderRadius: 20px;
 
 #{$block} {
-    --g-modal-border-radius: #{$borderRadius};
-    --g-modal-margin: 20px;
+    --g-modal-border-radius: var(--g-spacing-5);
+    --g-modal-margin: var(--g-spacing-5);
+
+    & .g-modal__content-wrapper {
+        overflow-x: initial;
+    }
 
     &__modal-content {
-        border-radius: $borderRadius;
+        border-radius: var(--g-spacing-5);
     }
 }
diff --git a/src/components/Stories/Stories.tsx b/src/components/Stories/Stories.tsx
@@ -5,7 +5,6 @@ import {Modal} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
-import type {StoriesLayoutProps} from './components/StoriesLayout/StoriesLayout';
 import {IndexType, StoriesLayout} from './components/StoriesLayout/StoriesLayout';
 import {useSyncWithLS} from './hooks';
 import type {StoriesItem} from './types';
@@ -26,7 +25,6 @@ export interface StoriesProps {
     onNextClick?: (storyIndex: number) => void;
     disableOutsideClick?: boolean;
     className?: string;
-    action?: StoriesLayoutProps['action'];
     syncInTabsKey?: string;
 }
 
@@ -39,7 +37,6 @@ export function Stories({
     initialStoryIndex = 0,
     disableOutsideClick = true,
     className,
-    action,
     syncInTabsKey,
 }: StoriesProps) {
     const [storyIndex, setStoryIndex] = React.useState(initialStoryIndex);
@@ -125,7 +122,6 @@ export function Stories({
                 handleButtonClose={handleButtonClose}
                 handleGotoNext={handleGotoNext}
                 handleGotoPrevious={handleGotoPrevious}
-                action={action}
             />
         </Modal>
     );