@inc2734/unitone-css 0.23.0

package/src/layout-primitives/with-sidebar/stories/index.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { WithSidebar } from '../WithSidebar';
+
+export default {
+  title: 'Layout Primitives/WithSidebar',
+  component: WithSidebar,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    alignItems: {
+      control: { type: 'inline-radio' },
+      description: '`--unitone--align-items`',
+      description:
+        'Alignment of the row direction. Set by CSS var `--unitone--align-items` or `data-unitone-layout` attribute `-align-items:x`.',
+      options: ['start', 'center', 'end'],
+      table: { defaultValue: { summary: 'start' } },
+      type: { name: 'string', required: false },
+    },
+    contentMinWidth: {
+      control: { type: 'text' },
+      description: 'Min width of the content. Set by CSS var `--unitone--content-min-width`.',
+      table: { defaultValue: { summary: '50%' } },
+      type: { name: 'string', required: false },
+    },
+    gap: {
+      control: { type: 'inline-radio' },
+      description:
+        'Gap. Set by CSS var `--unitone--gap` or `data-unitone-layout` attribute `-gap:x`.',
+      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
+      table: { defaultValue: { summary: 'var(--unitone--s1)' } },
+      type: { name: 'number', required: false },
+    },
+    revert: {
+      control: { type: 'inline-radio' },
+      description:
+        'The way child elements are displayed is reversed. Set by `data-unitone-layout` attribute `-revert`.',
+      options: [false, true],
+      table: { defaultValue: { summary: 'false' } },
+      type: { name: 'boolean', required: false },
+    },
+    sidebar: {
+      control: { type: 'inline-radio' },
+      description:
+        'Which sidebar should be treated as a sidebar, right or left? Set by `data-unitone-layout` attribute `-sidebar:x`.',
+      options: ['left', 'right'],
+      table: { defaultValue: { summary: 'right' } },
+      type: { name: 'string', required: false },
+    },
+    sidebarWidth: {
+      control: { type: 'text' },
+      description: 'Sidebar width. Set by CSS var `--unitone--sidebar-width`.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    alignItems: 'start',
+    contentMinWidth: '50%',
+    gap: 1,
+    revert: false,
+    sidebar: 'right',
+    sidebarWidth: 'initial',
+  },
+};
+
+const content =
+  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill';
+
+export const Default = (args) => {
+  return (
+    <WithSidebar {...args}>
+      <p>{content}</p>
+      <ul>
+        <li>Lorem</li>
+        <li>ipsum</li>
+        <li>dolor</li>
+      </ul>
+    </WithSidebar>
+  );
+};
+
+export const Revert = (args) => {
+  return (
+    <WithSidebar {...args}>
+      <p>{content}</p>
+      <ul>
+        <li>Lorem</li>
+        <li>ipsum</li>
+        <li>dolor</li>
+      </ul>
+    </WithSidebar>
+  );
+};
+Revert.storyName = 'Example : Revert';
+Revert.args = {
+  revert: true,
+};
+
+export const Input = (args) => {
+  return (
+    <WithSidebar {...args}>
+      <input type="text" />
+      <button>Button</button>
+    </WithSidebar>
+  );
+};
+Input.storyName = 'Example : Input';
+Input.args = {
+  gap: 1,
+};
+
+export const MediaText = (args) => {
+  return (
+    <WithSidebar {...args}>
+      <img src="https://placehold.jp/400x300.jpg" alt="" />
+      <p>{content}</p>
+    </WithSidebar>
+  );
+};
+MediaText.storyName = 'Example : Media and text';
+MediaText.args = {
+  sidebar: 'left',
+  sidebarWidth: '300px',
+};

package/src/patterns/features/features-1/Features1.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Center } from '../../../layout-primitives/center/Center';
+import { Container } from '../../../layout-primitives/container/Container';
+import { ResponsiveGrid } from '../../../layout-primitives/responsive-grid/ResponsiveGrid';
+import { Gutters } from '../../../layout-primitives/gutters/Gutters';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Feature1 = ({ items = [], ...props }) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Gutters>
+      <Container>
+        <Stack gap={props.gap}>
+          {!!props.title && (
+            <Center>
+              <h2 style={{ '--unitone--font-size': 3 }}>{props.title}</h2>
+            </Center>
+          )}
+          {0 < items.length && (
+            <ResponsiveGrid columnMinWidth={props.columnMinWidth} gap={props.gap}>
+              {items.map((item, index) => (
+                <Stack key={index} gap={-1}>
+                  {(!!item.src || !!item.title) && (
+                    <Stack gap={-2}>
+                      {!!item.src && (
+                        <Center>
+                          <img src={item.src} alt="" />
+                        </Center>
+                      )}
+                      {!!item.title && (
+                        <Center>
+                          <h3 style={{ '--unitone--font-size': 1 }}>{item.title}</h3>
+                        </Center>
+                      )}
+                    </Stack>
+                  )}
+                  {!!item.content && (
+                    <Text style={{ '--unitone--font-size': -1 }}>
+                      <p>{item.content}</p>
+                    </Text>
+                  )}
+                </Stack>
+              ))}
+            </ResponsiveGrid>
+          )}
+        </Stack>
+      </Container>
+    </Gutters>
+  </Decorator>
+);

package/src/patterns/features/features-1/stories/index.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Feature1 } from '../Features1';
+
+export default {
+  title: 'Patterns/Features/Features-1',
+  component: Feature1,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    columnMinWidth: {
+      control: { type: 'text' },
+      description: '`--unitone--column-min-width`',
+      table: { defaultValue: { summary: '250px' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+    gap: {
+      control: { type: 'inline-radio' },
+      options: [1, 2, 3, 4],
+      table: { defaultValue: { summary: 2 } },
+      type: { name: 'number', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    columnMinWidth: '250px',
+    color: 'initial',
+    gap: 2,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Feature1
+    backgroundColor={props.backgroundColor}
+    columnMinWidth={props.columnMinWidth}
+    color={props.color}
+    gap={props.gap}
+    title="Lorem ipsum dolor sit amet"
+    items={[
+      {
+        title: 'Lorem',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+      },
+      {
+        title: 'ipsum',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      },
+      {
+        title: 'dolor',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'Ut enim ad minim veniam',
+      },
+    ]}
+  />
+);

package/src/patterns/features/features-2/Features2.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Frame } from '../../../layout-primitives/frame/Frame';
+import { Layers } from '../../../layout-primitives/layers/Layers';
+import { ResponsiveGrid } from '../../../layout-primitives/responsive-grid/ResponsiveGrid';
+import { Gutters } from '../../../layout-primitives/gutters/Gutters';
+
+export const Feature2 = ({ items = [], ...props }) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Gutters>
+      <Container>
+        {0 < items.length && (
+          <ResponsiveGrid columnMinWidth={props.columnMinWidth} gap={props.gap}>
+            {items.map((item, index) => (
+              <Layers key={index}>
+                <Frame ratio="3/4">{!!item.src && <img src={item.src} alt="" />}</Frame>
+                {!!item.content && (
+                  <div style={{ '--unitone--font-size': -1, '--unitone--align-self': 'end' }}>
+                    <Decorator padding={1}>
+                      <p>{item.content}</p>
+                    </Decorator>
+                  </div>
+                )}
+              </Layers>
+            ))}
+          </ResponsiveGrid>
+        )}
+      </Container>
+    </Gutters>
+  </Decorator>
+);

package/src/patterns/features/features-2/stories/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { Feature2 } from '../Features2';
+
+export default {
+  title: 'Patterns/Features/Features-2',
+  component: Feature2,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    columnMinWidth: {
+      control: { type: 'text' },
+      description: '`--unitone--column-min-width`',
+      table: { defaultValue: { summary: '250px' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: '#fff' } },
+      type: { name: 'string', required: false },
+    },
+    gap: {
+      control: { type: 'inline-radio' },
+      options: [0, 1, 2, 3, 4],
+      table: { defaultValue: { summary: 0 } },
+      type: { name: 'number', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    columnMinWidth: '250px',
+    color: '#fff',
+    gap: 0,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Feature2
+    backgroundColor={props.backgroundColor}
+    columnMinWidth={props.columnMinWidth}
+    color={props.color}
+    gap={props.gap}
+    items={[
+      {
+        title: 'Lorem',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+      },
+      {
+        title: 'ipsum',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      },
+      {
+        title: 'dolor',
+        src: 'https://placehold.jp/600x800.jpg',
+        content: 'Ut enim ad minim veniam',
+      },
+    ]}
+  />
+);

package/src/patterns/header/header-1/Header1.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Center } from '../../../layout-primitives/center/Center';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Layers } from '../../../layout-primitives/layers/Layers';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Header1 = (props) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Layers cover>
+      {!!props.src && <img src={props.src} alt="" />}
+      <Cover>
+        <CoverContent>
+          <Container gutters={0} maxWidth="var(--unitone--measure)">
+            <Stack gap={2}>
+              {!!props.title && (
+                <Center>
+                  <h2 style={{ '--unitone--font-size': 5 }}>{props.title}</h2>
+                </Center>
+              )}
+              {!!props.children && <Text center>{props.children}</Text>}
+            </Stack>
+          </Container>
+        </CoverContent>
+      </Cover>
+    </Layers>
+  </Decorator>
+);

package/src/patterns/header/header-1/stories/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Header1 } from '../Header1';
+
+export default {
+  title: 'Patterns/Header/Header-1',
+  component: Header1,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: '#fff' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    color: '#fff',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Header1
+    src="https://placehold.jp/1280x1024.jpg"
+    title="Lorem ipsum dolor"
+    backgroundColor={props.backgroundColor}
+    color={props.color}
+  >
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cill
+    </p>
+  </Header1>
+);

package/src/patterns/header/header-2/Header2.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Center } from '../../../layout-primitives/center/Center';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Gutters } from '../../../layout-primitives/gutters/Gutters';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Header2 = (props) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Gutters style={{ paddingBottom: 0 }}>
+      <Stack gap={2}>
+        <Container>
+          <Stack gap={2}>
+            {!!props.title && (
+              <Center>
+                <h2 style={{ '--unitone--font-size': 5 }}>{props.title}</h2>
+              </Center>
+            )}
+            {!!props.children && <Text center>{props.children}</Text>}
+          </Stack>
+        </Container>
+
+        {!!props.src && (
+          <Center>
+            <img src={props.src} alt="" style={{ marginBottom: 0 }} />
+          </Center>
+        )}
+      </Stack>
+    </Gutters>
+  </Decorator>
+);

package/src/patterns/header/header-2/stories/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Header2 } from '../Header2';
+
+export default {
+  title: 'Patterns/Header/Header-2',
+  component: Header2,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    color: 'initial',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Header2
+    src="https://placehold.jp/1280x480.jpg"
+    title="Lorem ipsum dolor"
+    backgroundColor={props.backgroundColor}
+    color={props.color}
+  >
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cill
+    </p>
+  </Header2>
+);

package/src/patterns/header/header-3/Header3.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Center } from '../../../layout-primitives/center/Center';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Gutters } from '../../../layout-primitives/gutters/Gutters';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Header3 = (props) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Gutters>
+      <Container>
+        <Stack gap={2}>
+          <Container align="start" gutters={0} maxWidth="var(--unitone--measure)">
+            <Stack gap={2}>
+              {!!props.title && <h2 style={{ '--unitone--font-size': 3 }}>{props.title}</h2>}
+              {!!props.children && <Text>{props.children}</Text>}
+            </Stack>
+          </Container>
+          {!!props.src && (
+            <Center>
+              <img src={props.src} alt="" />
+            </Center>
+          )}
+        </Stack>
+      </Container>
+    </Gutters>
+  </Decorator>
+);

package/src/patterns/header/header-3/stories/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Header3 } from '../Header3';
+
+export default {
+  title: 'Patterns/Header/Header-3',
+  component: Header3,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    color: 'initial',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Header3
+    src="https://placehold.jp/1280x1024.jpg"
+    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
+    backgroundColor={props.backgroundColor}
+    color={props.color}
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cill
+    </p>
+  </Header3>
+);

package/src/patterns/header/header-4/Header4.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Layers } from '../../../layout-primitives/layers/Layers';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Header4 = (props) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Layers cover>
+      {!!props.src && <img src={props.src} alt="" />}
+      <Cover>
+        <CoverContent></CoverContent>
+        <Container align="start" gutters={0} maxWidth="var(--unitone--measure)">
+          <Stack gap={2}>
+            {!!props.title && <h2 style={{ '--unitone--font-size': 4 }}>{props.title}</h2>}
+            {!!props.children && <Text>{props.children}</Text>}
+          </Stack>
+        </Container>
+      </Cover>
+    </Layers>
+  </Decorator>
+);

package/src/patterns/header/header-4/stories/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Header4 } from '../Header4';
+
+export default {
+  title: 'Patterns/Header/Header-4',
+  component: Header4,
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      table: { defaultValue: { summary: '#fff' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transparent',
+    color: '#fff',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = (props) => (
+  <Header4
+    src="https://placehold.jp/1280x1024.jpg"
+    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
+    backgroundColor={props.backgroundColor}
+    color={props.color}
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua.
+    </p>
+  </Header4>
+);

package/src/patterns/header/header-5/Header5.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Layers } from '../../../layout-primitives/layers/Layers';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+export const Header5 = (props) => (
+  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
+    <Layers cover>
+      {!!props.src && (
+        <img src={props.src} alt="" style={{ width: 'var(--unitone--pg10)', left: 'auto' }} />
+      )}
+      <Cover>
+        <CoverContent>
+          <Container align="start" gutters={0} maxWidth="var(--unitone--measure)">
+            <Stack gap={2}>
+              {!!props.title && (
+                <Stack style={{ '--unitone--font-size': 5 }}>
+                  <h2>{props.title}</h2>
+                </Stack>
+              )}
+              {!!props.children && <Text>{props.children}</Text>}
+            </Stack>
+          </Container>
+        </CoverContent>
+      </Cover>
+    </Layers>
+  </Decorator>
+);