@os-design/website 1.0.200 → 1.0.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/website",
-  "version": "1.0.200",
+  "version": "1.0.202",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,8 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,11 +30,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.198",
+    "@os-design/core": "^1.0.199",
     "@os-design/media": "^1.0.18",
     "@os-design/styles": "^1.0.44",
     "@os-design/theming": "^1.0.42",
-    "@os-design/utils": "^1.0.60"
+    "@os-design/utils": "^1.0.61"
   },
   "devDependencies": {
     "@emotion/react": ">=11",
@@ -46,5 +47,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "8791b7a1da0d71fb3e47d0df630e835c8221cfa9"
+  "gitHead": "3c083af96a57f5694d51dcb5da1741773543bf77"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/PageContent/index.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import PageContent, { PageContentProps } from './index';
+
+export default {
+  title: 'Website/PageContent',
+  component: PageContent,
+} satisfies Meta<PageContentProps>;
+
+export const ChildrenText: StoryObj<PageContentProps> = {
+  args: {
+    children: 'Text '.repeat(50).trimEnd(),
+  },
+};

package/src/PageContent/index.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import {
+  PageContent as BasePageContent,
+  PageContentProps as BasePageContentProps,
+} from '@os-design/core';
+
+export type PageContentProps = BasePageContentProps;
+
+/**
+ * The page content of the website page.
+ */
+const PageContent = styled(BasePageContent)`
+  padding: 0 !important;
+`;
+
+export default PageContent;

package/src/Section/index.stories.tsx

@@ -0,0 +1,78 @@
+import { ThemeOverrider } from '@os-design/theming';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React from 'react';
+import Section, { SectionProps } from './index';
+
+const Component: React.FC<SectionProps> = (props) => (
+  <Section {...props}>
+    <h1>Title</h1>
+    <p>{'Text '.repeat(200).trimEnd()}</p>
+  </Section>
+);
+
+export default {
+  title: 'Website/Section',
+  component: Component,
+  args: {
+    bgProps: undefined,
+  },
+} satisfies Meta<SectionProps>;
+
+export const NoParameters: StoryObj<SectionProps> = {};
+
+export const Small: StoryObj<SectionProps> = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Medium: StoryObj<SectionProps> = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const Large: StoryObj<SectionProps> = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const CustomSize: StoryObj<SectionProps> = {
+  args: {
+    size: '2em',
+  },
+};
+
+export const BgUrl: StoryObj<SectionProps> = {
+  args: {
+    bgUrl:
+      'https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c',
+  },
+};
+
+export const BgProps: StoryObj<SectionProps> = {
+  args: {
+    ...BgUrl.args,
+    bgProps: {
+      sizes: [72, 192],
+      defaultSize: 192,
+    },
+  },
+};
+
+export const LimitedWidth: StoryObj<SectionProps> = {
+  args: {
+    limitedWidth: true,
+  },
+};
+
+export const Centered: StoryObj<SectionProps> = {
+  args: {
+    centered: true,
+  },
+};
+
+export const Dark: StoryObj<SectionProps> = {
+  parameters: { theme: 'dark' },
+};

package/src/Section/index.tsx

@@ -0,0 +1,156 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+
+import { Image, ImageProps } from '@os-design/core';
+
+import { m } from '@os-design/media';
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;
+export interface SectionProps extends JsxSectionProps, WithSize {
+  /**
+   * The URL of the background image.
+   * @default undefined
+   */
+  bgUrl?: string;
+  /**
+   * Props of the background image.
+   * @default undefined
+   */
+  bgProps?: Omit<ImageProps, 'url' | 'cover'>;
+  /**
+   * Whether the content has a limited width.
+   * @default false
+   */
+  limitedWidth?: boolean;
+  /**
+   * Whether the content is centered.
+   * @default false
+   */
+  centered?: boolean;
+}
+
+const BG_IMAGE_CLASS_NAME = 'section-bg-image';
+
+const hasBgStyles = (p) =>
+  p.hasBg &&
+  css`
+    & > *:not(.${BG_IMAGE_CLASS_NAME}) {
+      z-index: 1;
+    }
+  `;
+
+interface ContainerProps extends WithSize {
+  hasBg: boolean;
+}
+const Container = styled(
+  'section',
+  omitEmotionProps('hasBg', 'size')
+)<ContainerProps>`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: ${(p) => p.theme.sectionPaddingVertical}em
+    ${(p) => p.theme.sectionPaddingHorizontal[0]}em;
+  ${m.min.sm} {
+    padding: ${(p) => p.theme.sectionPaddingVertical}em
+      ${(p) => p.theme.sectionPaddingHorizontal[1]}em;
+  }
+
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${hasBgStyles};
+  ${sizeStyles};
+`;
+
+const BackgroundImage = styled(Image)`
+  // Reset image styles
+  border-radius: 0;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  filter: brightness(${(p) => p.theme.sectionBgImageBrightness}%);
+`;
+
+const centeredStyles = (p) =>
+  p.centered &&
+  css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  `;
+
+interface LimitedWidthProps {
+  centered: boolean;
+}
+const LimitedWidth = styled(
+  'div',
+  omitEmotionProps('centered')
+)<LimitedWidthProps>`
+  width: 100%;
+  max-width: ${(p) => p.theme.sectionMaxWidth}em;
+  ${centeredStyles};
+`;
+
+/**
+ * The base section for the content.
+ */
+const Section = forwardRef<HTMLElement, SectionProps>(
+  (
+    {
+      bgUrl,
+      bgProps = { defaultSize: 1024 },
+      limitedWidth = false,
+      centered = false,
+      size,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const { className: bgClassName, ...restBgProps } = bgProps;
+    const { overrides } = useTheme();
+
+    const section = (
+      <Container hasBg={!!bgUrl} size={size} {...rest} ref={ref}>
+        {limitedWidth ? (
+          <LimitedWidth centered={centered}>{children}</LimitedWidth>
+        ) : (
+          children
+        )}
+        {bgUrl && (
+          <BackgroundImage
+            url={bgUrl}
+            cover
+            className={[bgClassName, BG_IMAGE_CLASS_NAME]
+              .filter((i) => i)
+              .join(' ')}
+            {...restBgProps}
+          />
+        )}
+      </Container>
+    );
+
+    if (!bgUrl) return section;
+    return (
+      <ThemeOverrider activeTheme='dark' overrides={overrides}>
+        {section}
+      </ThemeOverrider>
+    );
+  }
+);
+
+Section.displayName = 'Section';
+
+export default Section;

package/src/SectionFeature/index.stories.tsx

@@ -0,0 +1,28 @@
+import { ThemeOverrider } from '@os-design/theming';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React from 'react';
+import SectionFeature, { SectionFeatureProps } from './index';
+
+const Component: React.FC<SectionFeatureProps> = (props) => (
+  <SectionFeature {...props}>
+    <h1>Title</h1>
+    <p>{'Text '.repeat(100).trimEnd()}</p>
+  </SectionFeature>
+);
+
+export default {
+  title: 'Website/SectionFeature',
+  component: Component,
+} satisfies Meta<SectionFeatureProps>;
+
+export const NoParameters: StoryObj<SectionFeatureProps> = {};
+
+export const Media: StoryObj<SectionFeatureProps> = {
+  args: {
+    media: <img src='https://loremflickr.com/400/400' alt='media' />,
+  },
+};
+
+export const Dark: StoryObj<SectionFeatureProps> = {
+  parameters: { theme: 'dark' },
+};

package/src/SectionFeature/index.tsx

@@ -0,0 +1,111 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+
+import { m } from '@os-design/media';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Section, { SectionProps } from '../Section';
+
+export interface SectionFeatureProps extends SectionProps {
+  /**
+   * The media component. For example, an image.
+   * @default undefined
+   */
+  media?: React.ReactElement;
+}
+
+const containerHasMediaStyles = (p) =>
+  p.hasMedia &&
+  css`
+    display: grid;
+
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: 'content' 'media';
+    grid-row-gap: ${p.theme.sectionFeatureRowGap}em;
+
+    ${m.min.md} {
+      grid-template-columns:
+        minmax(
+          ${100 - p.theme.sectionFeatureMediaWidthPercent}%,
+          ${p.theme.sectionFeatureContentMaxWidth}em
+        )
+        ${p.theme.sectionFeatureMediaWidthPercent}%;
+      grid-template-rows: 1fr;
+      grid-template-areas: 'content media';
+      grid-column-gap: ${p.theme.sectionFeatureColumnGapPercent}%;
+      padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;
+    }
+  `;
+
+const containerNotHasMediaStyles = (p) =>
+  !p.hasMedia &&
+  css`
+    max-width: ${p.theme.sectionFeatureContentMaxWidth}em;
+  `;
+
+interface ContainerProps {
+  hasMedia: boolean;
+}
+const Container = styled('div', omitEmotionProps('hasMedia'))<ContainerProps>`
+  color: ${(p) => clr(p.theme.colorText)};
+  ${containerHasMediaStyles};
+  ${containerNotHasMediaStyles};
+`;
+
+const Content = styled.div`
+  grid-area: content;
+  align-self: center;
+`;
+
+const Media = styled.div`
+  grid-area: media;
+  align-self: center;
+`;
+
+const sectionHasMediaStyles = (p) =>
+  p.hasMedia &&
+  css`
+    ${m.min.md} {
+      &:nth-of-type(even) {
+        & > div {
+          grid-template-areas: 'media content';
+          grid-template-columns: ${p.theme.sectionFeatureMediaWidthPercent}% minmax(
+              ${100 - p.theme.sectionFeatureMediaWidthPercent}%,
+              ${p.theme.sectionFeatureContentMaxWidth}em
+            );
+        }
+      }
+    }
+  `;
+
+interface StyledSectionProps {
+  hasMedia: boolean;
+}
+const StyledSection = styled(
+  Section,
+  omitEmotionProps('hasMedia')
+)<StyledSectionProps>`
+  ${sectionHasMediaStyles};
+`;
+
+/**
+ * The section for describing an app feature.
+ */
+const SectionFeature = forwardRef<HTMLElement, SectionFeatureProps>(
+  ({ media, children, ...rest }, ref) => (
+    <StyledSection hasMedia={!!media} {...rest} ref={ref}>
+      <Container hasMedia={!!media}>
+        <Content>{children}</Content>
+        {media && <Media>{media}</Media>}
+      </Container>
+    </StyledSection>
+  )
+);
+
+SectionFeature.displayName = 'SectionFeature';
+
+export default SectionFeature;

package/src/index.ts

@@ -0,0 +1,7 @@
+export { default as PageContent } from './PageContent';
+export { default as Section } from './Section';
+export { default as SectionFeature } from './SectionFeature';
+
+export * from './PageContent';
+export * from './Section';
+export * from './SectionFeature';

package/src/samples.stories.tsx

@@ -0,0 +1,178 @@
+import styled from '@emotion/styled';
+import {
+  TagList as BaseTagList,
+  Button,
+  Image,
+  InputSearch,
+  Layout,
+  Link,
+  LogoLink,
+  Navigation,
+  NavigationItem,
+  TagLink,
+  ThemeSwitcher,
+} from '@os-design/core';
+import { Blog, Contacts, Home } from '@os-design/icons';
+import { m } from '@os-design/media';
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import PageContent from './PageContent';
+import Section from './Section';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-relative-packages
+import logo from '../../core/src/LogoLink/logo.example.svg';
+import SectionFeature from './SectionFeature';
+
+export default {
+  title: 'Website/samples',
+  parameters: {
+    layout: 'fullscreen',
+    docs: { page: null },
+  },
+} as Meta;
+
+const NavigationAddon = styled.div`
+  width: 100%;
+  height: ${(p) => p.theme.navigationSideWidth}em;
+  min-height: ${(p) => p.theme.navigationSideWidth}em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: center;
+
+  padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[0]}em;
+  ${m.min.sm} {
+    padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[1]}em;
+  }
+`;
+
+const Footer = styled.footer`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[0]}em;
+  ${m.min.sm} {
+    padding: 1.5em ${(p) => p.theme.sectionPaddingHorizontal[1]}em;
+  }
+`;
+
+const SearchContent = styled.div`
+  width: 100%;
+  max-width: 40em;
+  text-align: center;
+`;
+
+const TagList = styled(BaseTagList)`
+  margin-top: 0.5em;
+`;
+
+export const HomePage: StoryFn = () => (
+  <Layout>
+    <Navigation
+      sideBottom={
+        <NavigationAddon>
+          <ThemeSwitcher />
+        </NavigationAddon>
+      }
+    >
+      <NavigationItem icon={<Home />}>Home</NavigationItem>
+      <NavigationItem icon={<Blog />}>Projects</NavigationItem>
+      <NavigationItem icon={<Contacts />}>Contacts</NavigationItem>
+    </Navigation>
+
+    <PageContent hasNavigation>
+      <Header>
+        <LogoLink src={logo} />
+      </Header>
+
+      <SectionFeature
+        media={
+          <Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
+        }
+      >
+        <h1>Grow your business faster</h1>
+        <p>{'Text '.repeat(50).trimEnd()}</p>
+        <Button>Start</Button>
+      </SectionFeature>
+
+      <SectionFeature
+        media={
+          <Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
+        }
+      >
+        <h2>Super fast</h2>
+        <p>{'Text '.repeat(50).trimEnd()}</p>
+      </SectionFeature>
+
+      <SectionFeature
+        media={
+          <Image url='https://storage.yandexcloud.net/englika/collections/Q29sbGVjdGlvbjoyMw-366c' />
+        }
+      >
+        <h2>Completely secure</h2>
+        <p>{'Text '.repeat(50).trimEnd()}</p>
+      </SectionFeature>
+
+      <Section>
+        <h2>Try it for free</h2>
+        <p>{'Text '.repeat(200).trimEnd()}</p>
+        <Button>Start</Button>
+      </Section>
+
+      <Footer>
+        <Link href='mailto:company@domain.com'>company@domain.com</Link>
+        <div>© {new Date().getFullYear()} company</div>
+      </Footer>
+    </PageContent>
+  </Layout>
+);
+
+export const BlogPage: StoryFn = () => (
+  <Layout>
+    <Navigation
+      sideBottom={
+        <NavigationAddon>
+          <ThemeSwitcher />
+        </NavigationAddon>
+      }
+    >
+      <NavigationItem icon={<Home />}>Home</NavigationItem>
+      <NavigationItem icon={<Blog />}>Projects</NavigationItem>
+      <NavigationItem icon={<Contacts />}>Contacts</NavigationItem>
+    </Navigation>
+
+    <PageContent hasNavigation>
+      <Header>
+        <LogoLink src={logo} />
+      </Header>
+
+      <Section>
+        <SearchContent>
+          <h1>Blog posts</h1>
+          <InputSearch placeholder='Search' />
+          <TagList collapsible>
+            <TagLink>Tag 1</TagLink>
+            <TagLink>Tag 2</TagLink>
+          </TagList>
+        </SearchContent>
+      </Section>
+
+      <Section>
+        <h2>Try it for free</h2>
+        <p>{'Text '.repeat(200).trimEnd()}</p>
+        <Button>Start</Button>
+      </Section>
+
+      <Footer>
+        <Link href='mailto:company@domain.com'>company@domain.com</Link>
+        <div>© {new Date().getFullYear()} company</div>
+      </Footer>
+    </PageContent>
+  </Layout>
+);