@os-design/website 1.0.204 → 1.0.206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/website",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.206",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -14,8 +14,9 @@
|
|
|
14
14
|
"./package.json": "./package.json"
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
|
+
"dist",
|
|
17
18
|
"src",
|
|
18
|
-
"
|
|
19
|
+
"!**/*.stories.tsx"
|
|
19
20
|
],
|
|
20
21
|
"sideEffects": false,
|
|
21
22
|
"scripts": {
|
|
@@ -47,5 +48,5 @@
|
|
|
47
48
|
"react": ">=18",
|
|
48
49
|
"react-dom": ">=18"
|
|
49
50
|
},
|
|
50
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "44c3ded41c85526f06641800cf2f5c22ec4ac4a4"
|
|
51
52
|
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
|
|
3
|
-
import PageContent, { PageContentProps } from './index';
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: 'Website/PageContent',
|
|
7
|
-
component: PageContent,
|
|
8
|
-
} satisfies Meta<PageContentProps>;
|
|
9
|
-
|
|
10
|
-
export const ChildrenText: StoryObj<PageContentProps> = {
|
|
11
|
-
args: {
|
|
12
|
-
children: 'Text '.repeat(50).trimEnd(),
|
|
13
|
-
},
|
|
14
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { ThemeOverrider } from '@os-design/theming';
|
|
2
|
-
import { Meta, StoryFn, StoryObj } from '@storybook/react';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import Section, { SectionProps } from './index';
|
|
5
|
-
|
|
6
|
-
const Component: React.FC<SectionProps> = (props) => (
|
|
7
|
-
<Section {...props}>
|
|
8
|
-
<h1>Title</h1>
|
|
9
|
-
<p>{'Text '.repeat(200).trimEnd()}</p>
|
|
10
|
-
</Section>
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
export default {
|
|
14
|
-
title: 'Website/Section',
|
|
15
|
-
component: Component,
|
|
16
|
-
args: {
|
|
17
|
-
bgProps: undefined,
|
|
18
|
-
},
|
|
19
|
-
} satisfies Meta<SectionProps>;
|
|
20
|
-
|
|
21
|
-
export const NoParameters: StoryObj<SectionProps> = {};
|
|
22
|
-
|
|
23
|
-
export const Small: StoryObj<SectionProps> = {
|
|
24
|
-
args: {
|
|
25
|
-
size: 'small',
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const Medium: StoryObj<SectionProps> = {
|
|
30
|
-
args: {
|
|
31
|
-
size: 'medium',
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export const Large: StoryObj<SectionProps> = {
|
|
36
|
-
args: {
|
|
37
|
-
size: 'large',
|
|
38
|
-
},
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export const CustomSize: StoryObj<SectionProps> = {
|
|
42
|
-
args: {
|
|
43
|
-
size: '2em',
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const BgUrl: StoryObj<SectionProps> = {
|
|
48
|
-
args: {
|
|
49
|
-
bgUrl:
|
|
50
|
-
'https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c',
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export const BgProps: StoryObj<SectionProps> = {
|
|
55
|
-
args: {
|
|
56
|
-
...BgUrl.args,
|
|
57
|
-
bgProps: {
|
|
58
|
-
sizes: [72, 192],
|
|
59
|
-
defaultSize: 192,
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
export const LimitedWidth: StoryObj<SectionProps> = {
|
|
65
|
-
args: {
|
|
66
|
-
limitedWidth: true,
|
|
67
|
-
},
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export const Centered: StoryObj<SectionProps> = {
|
|
71
|
-
args: {
|
|
72
|
-
centered: true,
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const Dark: StoryObj<SectionProps> = {
|
|
77
|
-
parameters: { theme: 'dark' },
|
|
78
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { ThemeOverrider } from '@os-design/theming';
|
|
2
|
-
import { Meta, StoryFn, StoryObj } from '@storybook/react';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import SectionFeature, { SectionFeatureProps } from './index';
|
|
5
|
-
|
|
6
|
-
const Component: React.FC<SectionFeatureProps> = (props) => (
|
|
7
|
-
<SectionFeature {...props}>
|
|
8
|
-
<h1>Title</h1>
|
|
9
|
-
<p>{'Text '.repeat(100).trimEnd()}</p>
|
|
10
|
-
</SectionFeature>
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
export default {
|
|
14
|
-
title: 'Website/SectionFeature',
|
|
15
|
-
component: Component,
|
|
16
|
-
} satisfies Meta<SectionFeatureProps>;
|
|
17
|
-
|
|
18
|
-
export const NoParameters: StoryObj<SectionFeatureProps> = {};
|
|
19
|
-
|
|
20
|
-
export const Media: StoryObj<SectionFeatureProps> = {
|
|
21
|
-
args: {
|
|
22
|
-
media: <img src='https://loremflickr.com/400/400' alt='media' />,
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export const Dark: StoryObj<SectionFeatureProps> = {
|
|
27
|
-
parameters: { theme: 'dark' },
|
|
28
|
-
};
|
package/src/samples.stories.tsx
DELETED
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import styled from '@emotion/styled';
|
|
2
|
-
import {
|
|
3
|
-
TagList as BaseTagList,
|
|
4
|
-
Button,
|
|
5
|
-
Image,
|
|
6
|
-
InputSearch,
|
|
7
|
-
Layout,
|
|
8
|
-
Link,
|
|
9
|
-
LogoLink,
|
|
10
|
-
Navigation,
|
|
11
|
-
NavigationItem,
|
|
12
|
-
TagLink,
|
|
13
|
-
ThemeSwitcher,
|
|
14
|
-
} from '@os-design/core';
|
|
15
|
-
import { Blog, Contacts, Home } from '@os-design/icons';
|
|
16
|
-
import { m } from '@os-design/media';
|
|
17
|
-
import { Meta, StoryFn } from '@storybook/react';
|
|
18
|
-
import React from 'react';
|
|
19
|
-
import PageContent from './PageContent';
|
|
20
|
-
import Section from './Section';
|
|
21
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
22
|
-
// @ts-ignore
|
|
23
|
-
// eslint-disable-next-line import/no-relative-packages
|
|
24
|
-
import logo from '../../core/src/LogoLink/logo.example.svg';
|
|
25
|
-
import SectionFeature from './SectionFeature';
|
|
26
|
-
|
|
27
|
-
export default {
|
|
28
|
-
title: 'Website/samples',
|
|
29
|
-
parameters: {
|
|
30
|
-
layout: 'fullscreen',
|
|
31
|
-
docs: { page: null },
|
|
32
|
-
},
|
|
33
|
-
} as Meta;
|
|
34
|
-
|
|
35
|
-
const NavigationAddon = styled.div`
|
|
36
|
-
width: 100%;
|
|
37
|
-
height: ${(p) => p.theme.navigationSideWidth}em;
|
|
38
|
-
min-height: ${(p) => p.theme.navigationSideWidth}em;
|
|
39
|
-
display: flex;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
align-items: center;
|
|
42
|
-
`;
|
|
43
|
-
|
|
44
|
-
const Header = styled.div`
|
|
45
|
-
display: flex;
|
|
46
|
-
justify-content: center;
|
|
47
|
-
|
|
48
|
-
padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[0]}em;
|
|
49
|
-
${m.min.sm} {
|
|
50
|
-
padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[1]}em;
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
const Footer = styled.footer`
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
align-items: center;
|
|
58
|
-
|
|
59
|
-
padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[0]}em;
|
|
60
|
-
${m.min.sm} {
|
|
61
|
-
padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[1]}em;
|
|
62
|
-
}
|
|
63
|
-
`;
|
|
64
|
-
|
|
65
|
-
const SearchContent = styled.div`
|
|
66
|
-
width: 100%;
|
|
67
|
-
max-width: 40em;
|
|
68
|
-
text-align: center;
|
|
69
|
-
`;
|
|
70
|
-
|
|
71
|
-
const TagList = styled(BaseTagList)`
|
|
72
|
-
margin-top: 0.5em;
|
|
73
|
-
`;
|
|
74
|
-
|
|
75
|
-
export const HomePage: StoryFn = () => (
|
|
76
|
-
<Layout>
|
|
77
|
-
<Navigation
|
|
78
|
-
sideBottom={
|
|
79
|
-
<NavigationAddon>
|
|
80
|
-
<ThemeSwitcher />
|
|
81
|
-
</NavigationAddon>
|
|
82
|
-
}
|
|
83
|
-
>
|
|
84
|
-
<NavigationItem icon={<Home />}>Home</NavigationItem>
|
|
85
|
-
<NavigationItem icon={<Blog />}>Projects</NavigationItem>
|
|
86
|
-
<NavigationItem icon={<Contacts />}>Contacts</NavigationItem>
|
|
87
|
-
</Navigation>
|
|
88
|
-
|
|
89
|
-
<PageContent hasNavigation>
|
|
90
|
-
<Header>
|
|
91
|
-
<LogoLink src={logo} />
|
|
92
|
-
</Header>
|
|
93
|
-
|
|
94
|
-
<SectionFeature
|
|
95
|
-
media={
|
|
96
|
-
<Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
|
|
97
|
-
}
|
|
98
|
-
>
|
|
99
|
-
<h1>Grow your business faster</h1>
|
|
100
|
-
<p>{'Text '.repeat(50).trimEnd()}</p>
|
|
101
|
-
<Button>Start</Button>
|
|
102
|
-
</SectionFeature>
|
|
103
|
-
|
|
104
|
-
<SectionFeature
|
|
105
|
-
media={
|
|
106
|
-
<Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
|
|
107
|
-
}
|
|
108
|
-
>
|
|
109
|
-
<h2>Super fast</h2>
|
|
110
|
-
<p>{'Text '.repeat(50).trimEnd()}</p>
|
|
111
|
-
</SectionFeature>
|
|
112
|
-
|
|
113
|
-
<SectionFeature
|
|
114
|
-
media={
|
|
115
|
-
<Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
|
|
116
|
-
}
|
|
117
|
-
>
|
|
118
|
-
<h2>Completely secure</h2>
|
|
119
|
-
<p>{'Text '.repeat(50).trimEnd()}</p>
|
|
120
|
-
</SectionFeature>
|
|
121
|
-
|
|
122
|
-
<Section>
|
|
123
|
-
<h2>Try it for free</h2>
|
|
124
|
-
<p>{'Text '.repeat(200).trimEnd()}</p>
|
|
125
|
-
<Button>Start</Button>
|
|
126
|
-
</Section>
|
|
127
|
-
|
|
128
|
-
<Footer>
|
|
129
|
-
<Link href='mailto:company@domain.com'>company@domain.com</Link>
|
|
130
|
-
<div>© {new Date().getFullYear()} company</div>
|
|
131
|
-
</Footer>
|
|
132
|
-
</PageContent>
|
|
133
|
-
</Layout>
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
export const BlogPage: StoryFn = () => (
|
|
137
|
-
<Layout>
|
|
138
|
-
<Navigation
|
|
139
|
-
sideBottom={
|
|
140
|
-
<NavigationAddon>
|
|
141
|
-
<ThemeSwitcher />
|
|
142
|
-
</NavigationAddon>
|
|
143
|
-
}
|
|
144
|
-
>
|
|
145
|
-
<NavigationItem icon={<Home />}>Home</NavigationItem>
|
|
146
|
-
<NavigationItem icon={<Blog />}>Projects</NavigationItem>
|
|
147
|
-
<NavigationItem icon={<Contacts />}>Contacts</NavigationItem>
|
|
148
|
-
</Navigation>
|
|
149
|
-
|
|
150
|
-
<PageContent hasNavigation>
|
|
151
|
-
<Header>
|
|
152
|
-
<LogoLink src={logo} />
|
|
153
|
-
</Header>
|
|
154
|
-
|
|
155
|
-
<Section>
|
|
156
|
-
<SearchContent>
|
|
157
|
-
<h1>Blog posts</h1>
|
|
158
|
-
<InputSearch placeholder='Search' />
|
|
159
|
-
<TagList collapsible>
|
|
160
|
-
<TagLink>Tag 1</TagLink>
|
|
161
|
-
<TagLink>Tag 2</TagLink>
|
|
162
|
-
</TagList>
|
|
163
|
-
</SearchContent>
|
|
164
|
-
</Section>
|
|
165
|
-
|
|
166
|
-
<Section>
|
|
167
|
-
<h2>Try it for free</h2>
|
|
168
|
-
<p>{'Text '.repeat(200).trimEnd()}</p>
|
|
169
|
-
<Button>Start</Button>
|
|
170
|
-
</Section>
|
|
171
|
-
|
|
172
|
-
<Footer>
|
|
173
|
-
<Link href='mailto:company@domain.com'>company@domain.com</Link>
|
|
174
|
-
<div>© {new Date().getFullYear()} company</div>
|
|
175
|
-
</Footer>
|
|
176
|
-
</PageContent>
|
|
177
|
-
</Layout>
|
|
178
|
-
);
|