@salutejs/sdds-cs 0.318.1-canary.2018.15640028321.0 → 0.318.1-canary.2018.15775755664.0

package/components/Carousel/Carousel.config.d.ts

@@ -0,0 +1,14 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        size: {
+            s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+    };
+};

package/components/Carousel/Carousel.config.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-positive);\n                ", ": var(--surface-solid-primary-hover);\n                ", ": var(--text-accent-active);\n                ", ": var(--surface-solid-primary-active);\n            "])), _styledComponents.carouselNewTokens.paginationDotBackground, _styledComponents.carouselNewTokens.paginationDotActiveBackground, _styledComponents.carouselNewTokens.controlIconButtonColor, _styledComponents.carouselNewTokens.controlIconButtonBackgroundColor, _styledComponents.carouselNewTokens.controlIconButtonColorHover, _styledComponents.carouselNewTokens.controlIconButtonBackgroundColorHover, _styledComponents.carouselNewTokens.controlIconButtonColorActive, _styledComponents.carouselNewTokens.controlIconButtonBackgroundColorActive)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n            "])), _styledComponents.carouselNewTokens.controlIconButtonRadius)
+    }
+  }
+};

package/components/Carousel/Carousel.d.ts

@@ -0,0 +1,9 @@
+declare const Carousel: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
+    view: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    size: {
+        s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+}> & import("@salutejs/plasma-new-hope/styled-components").CarouselNewProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Carousel };

package/components/Carousel/Carousel.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _Carousel = /*#__PURE__*/require("./Carousel.config");
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.carouselNewConfig, _Carousel.config);
+var Carousel = exports.Carousel = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);

package/components/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { CarouselItem } from '@salutejs/plasma-new-hope/styled-components';
+export { Carousel } from './Carousel';

package/components/Carousel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.Carousel;
+  }
+});
+Object.defineProperty(exports, "CarouselItem", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.CarouselItem;
+  }
+});
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _Carousel = /*#__PURE__*/require("./Carousel");

package/emotion/cjs/components/Carousel/Carousel.config.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-positive);\n                ", ": var(--surface-solid-primary-hover);\n                ", ": var(--text-accent-active);\n                ", ": var(--surface-solid-primary-active);\n            "])), _emotion.carouselNewTokens.paginationDotBackground, _emotion.carouselNewTokens.paginationDotActiveBackground, _emotion.carouselNewTokens.controlIconButtonColor, _emotion.carouselNewTokens.controlIconButtonBackgroundColor, _emotion.carouselNewTokens.controlIconButtonColorHover, _emotion.carouselNewTokens.controlIconButtonBackgroundColorHover, _emotion.carouselNewTokens.controlIconButtonColorActive, _emotion.carouselNewTokens.controlIconButtonBackgroundColorActive)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n            "])), _emotion.carouselNewTokens.controlIconButtonRadius)
+    }
+  }
+};

package/emotion/cjs/components/Carousel/Carousel.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Carousel = /*#__PURE__*/require("./Carousel.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.carouselNewConfig, _Carousel.config);
+var Carousel = exports.Carousel = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

package/emotion/cjs/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+import { getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { config } from './Carousel.config';
+import { Carousel } from './Carousel';
+
+import { CarouselItem } from './index';
+
+type StoryCarouselProps = ComponentProps<typeof Carousel> & {
+    slides: number;
+    visibleDots: number;
+    paginationDisabled: boolean;
+    paginationCentered: boolean;
+};
+
+const { views, sizes } = getConfigVariations(config);
+
+const meta: Meta<StoryCarouselProps> = {
+    title: 'Navigation/Carousel',
+    component: Carousel,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        scrollAlign: {
+            options: ['start', 'center', 'end'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        slides: {
+            control: 'number',
+        },
+        visibleDots: {
+            control: 'number',
+        },
+        controlArrowsDisabled: {
+            control: 'boolean',
+        },
+        paginationDisabled: {
+            control: 'boolean',
+        },
+        paginationCentered: {
+            control: 'boolean',
+        },
+        gap: {
+            control: 'text',
+        },
+    },
+    args: {
+        view: 'default',
+        size: 's',
+        scrollAlign: 'start',
+        slides: 20,
+        controlArrowsDisabled: false,
+        paginationDisabled: false,
+        paginationCentered: false,
+        gap: '20px',
+    },
+    parameters: {
+        controls: {
+            include: [
+                'scrollAlign',
+                'visibleDots',
+                'slides',
+                'controlArrowsDisabled',
+                'paginationDisabled',
+                'paginationCentered',
+                'gap',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const StyledCard = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    width: 400px;
+    height: 370px;
+    background-color: #add8e6;
+    font-size: 30px;
+`;
+
+const StoryDefault = ({ visibleDots, slides, paginationDisabled, paginationCentered, ...rest }: StoryCarouselProps) => {
+    const items = Array(slides)
+        .fill(1)
+        .map((_, i) => ({
+            id: i,
+            title: i,
+        }));
+
+    return (
+        <>
+            <div style={{ width: '600px' }}>
+                <Carousel
+                    paginationOptions={{
+                        disabled: paginationDisabled,
+                        visibleDots,
+                        centered: paginationCentered,
+                    }}
+                    {...rest}
+                >
+                    {items.map((item, i) => (
+                        <CarouselItem key={i}>
+                            <StyledCard>{item.title}</StyledCard>
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+            </div>
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryCarouselProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

package/emotion/cjs/components/Carousel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.Carousel;
+  }
+});
+Object.defineProperty(exports, "CarouselItem", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.CarouselItem;
+  }
+});
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Carousel = /*#__PURE__*/require("./Carousel");

package/emotion/cjs/components/Modal/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
 import type { ComponentProps } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import type { Meta, StoryObj } from '@storybook/react';
 import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
 

package/emotion/cjs/index.js

@@ -707,6 +707,17 @@ Object.keys(_ToastNew).forEach(function (key) {
     }
   });
 });
+var _Carousel = /*#__PURE__*/require("./components/Carousel");
+Object.keys(_Carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Carousel[key];
+    }
+  });
+});
 var _mixins = /*#__PURE__*/require("./mixins");
 Object.keys(_mixins).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/emotion/es/components/Carousel/Carousel.config.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-positive);\n                ", ": var(--surface-solid-primary-hover);\n                ", ": var(--text-accent-active);\n                ", ": var(--surface-solid-primary-active);\n            "])), tokens.paginationDotBackground, tokens.paginationDotActiveBackground, tokens.controlIconButtonColor, tokens.controlIconButtonBackgroundColor, tokens.controlIconButtonColorHover, tokens.controlIconButtonBackgroundColorHover, tokens.controlIconButtonColorActive, tokens.controlIconButtonBackgroundColorActive)
+    },
+    size: {
+      s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n            "])), tokens.controlIconButtonRadius)
+    }
+  }
+};

package/emotion/es/components/Carousel/Carousel.js

@@ -0,0 +1,5 @@
+import { carouselNewConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import { config } from './Carousel.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(carouselNewConfig, config);
+var Carousel = /*#__PURE__*/component(mergedConfig);
+export { Carousel };

package/emotion/es/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+import { getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { config } from './Carousel.config';
+import { Carousel } from './Carousel';
+
+import { CarouselItem } from './index';
+
+type StoryCarouselProps = ComponentProps<typeof Carousel> & {
+    slides: number;
+    visibleDots: number;
+    paginationDisabled: boolean;
+    paginationCentered: boolean;
+};
+
+const { views, sizes } = getConfigVariations(config);
+
+const meta: Meta<StoryCarouselProps> = {
+    title: 'Navigation/Carousel',
+    component: Carousel,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        scrollAlign: {
+            options: ['start', 'center', 'end'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        slides: {
+            control: 'number',
+        },
+        visibleDots: {
+            control: 'number',
+        },
+        controlArrowsDisabled: {
+            control: 'boolean',
+        },
+        paginationDisabled: {
+            control: 'boolean',
+        },
+        paginationCentered: {
+            control: 'boolean',
+        },
+        gap: {
+            control: 'text',
+        },
+    },
+    args: {
+        view: 'default',
+        size: 's',
+        scrollAlign: 'start',
+        slides: 20,
+        controlArrowsDisabled: false,
+        paginationDisabled: false,
+        paginationCentered: false,
+        gap: '20px',
+    },
+    parameters: {
+        controls: {
+            include: [
+                'scrollAlign',
+                'visibleDots',
+                'slides',
+                'controlArrowsDisabled',
+                'paginationDisabled',
+                'paginationCentered',
+                'gap',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const StyledCard = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    width: 400px;
+    height: 370px;
+    background-color: #add8e6;
+    font-size: 30px;
+`;
+
+const StoryDefault = ({ visibleDots, slides, paginationDisabled, paginationCentered, ...rest }: StoryCarouselProps) => {
+    const items = Array(slides)
+        .fill(1)
+        .map((_, i) => ({
+            id: i,
+            title: i,
+        }));
+
+    return (
+        <>
+            <div style={{ width: '600px' }}>
+                <Carousel
+                    paginationOptions={{
+                        disabled: paginationDisabled,
+                        visibleDots,
+                        centered: paginationCentered,
+                    }}
+                    {...rest}
+                >
+                    {items.map((item, i) => (
+                        <CarouselItem key={i}>
+                            <StyledCard>{item.title}</StyledCard>
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+            </div>
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryCarouselProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

package/emotion/es/components/Carousel/index.js

@@ -0,0 +1,2 @@
+export { CarouselItem } from '@salutejs/plasma-new-hope/emotion';
+export { Carousel } from './Carousel';

package/emotion/es/components/Modal/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
 import type { ComponentProps } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import type { Meta, StoryObj } from '@storybook/react';
 import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
 

package/emotion/es/index.js

@@ -62,5 +62,6 @@ export * from './components/Tree';
 export * from './components/NumberFormat';
 export * from './components/Table';
 export * from './components/ToastNew';
+export * from './components/Carousel';
 export * from './mixins';
 export * from './tokens';

package/es/components/Carousel/Carousel.config.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-positive);\n                ", ": var(--surface-solid-primary-hover);\n                ", ": var(--text-accent-active);\n                ", ": var(--surface-solid-primary-active);\n            "])), tokens.paginationDotBackground, tokens.paginationDotActiveBackground, tokens.controlIconButtonColor, tokens.controlIconButtonBackgroundColor, tokens.controlIconButtonColorHover, tokens.controlIconButtonBackgroundColorHover, tokens.controlIconButtonColorActive, tokens.controlIconButtonBackgroundColorActive)
+    },
+    size: {
+      s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n            "])), tokens.controlIconButtonRadius)
+    }
+  }
+};

package/es/components/Carousel/Carousel.js

@@ -0,0 +1,5 @@
+import { carouselNewConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Carousel.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(carouselNewConfig, config);
+var Carousel = /*#__PURE__*/component(mergedConfig);
+export { Carousel };

package/es/components/Carousel/index.js

@@ -0,0 +1,2 @@
+export { CarouselItem } from '@salutejs/plasma-new-hope/styled-components';
+export { Carousel } from './Carousel';

package/es/index.js

@@ -62,5 +62,6 @@ export * from './components/Tree';
 export * from './components/NumberFormat';
 export * from './components/Table';
 export * from './components/ToastNew';
+export * from './components/Carousel';
 export * from './mixins';
 export * from './tokens';

package/index.d.ts

@@ -62,5 +62,6 @@ export * from './components/Tree';
 export * from './components/NumberFormat';
 export * from './components/Table';
 export * from './components/ToastNew';
+export * from './components/Carousel';
 export * from './mixins';
 export * from './tokens';

package/index.js

@@ -707,6 +707,17 @@ Object.keys(_ToastNew).forEach(function (key) {
     }
   });
 });
+var _Carousel = /*#__PURE__*/require("./components/Carousel");
+Object.keys(_Carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Carousel[key];
+    }
+  });
+});
 var _mixins = /*#__PURE__*/require("./mixins");
 Object.keys(_mixins).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-cs",
-  "version": "0.318.1-canary.2018.15640028321.0",
+  "version": "0.318.1-canary.2018.15775755664.0",
   "description": "Salute Design System / React UI kit for SDDS CS web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "directory": "packages/sdds-cs"
   },
   "dependencies": {
-    "@salutejs/plasma-new-hope": "0.326.1-canary.2018.15640028321.0",
+    "@salutejs/plasma-new-hope": "0.326.1-canary.2018.15775755664.0",
     "@salutejs/sdds-themes": "0.38.0"
   },
   "peerDependencies": {
@@ -123,5 +123,5 @@
     "Anton Vinogradov"
   ],
   "sideEffects": false,
-  "gitHead": "49ad50d0421ed59f3e093a9309cdc8425bf10bab"
+  "gitHead": "fa19a157ccb51ac63787c93a18ed9099ab5d6071"
 }