@inc2734/unitone-css 0.47.2 → 0.48.0

package/src/layout-primitives/with-sidebar/README.md

@@ -1,169 +0,0 @@
-# With sidebar
-
-Assemble the component with sidebars. If the configured width can no longer be maintained, a single column display will be used.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="with-sidebar">
-  <p>Lorem ipsum dolor sit amet</p>
-  <ul>
-    <li>Lorem</li>
-    <li>ipsum</li>
-    <li>dolor</li>
-  </ul>
-</div>
-```
-
-### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar>
-  <p>Lorem ipsum dolor sit amet</p>
-  <ul>
-    <li>Lorem</li>
-    <li>ipsum</li>
-    <li>dolor</li>
-  </ul>
-</WithSidebar>
-```
-
-## Props
-
-### Sidebar
-
-Sets sidebar position. Default is `right`.
-
-left / right
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar -sidebar:left">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar sidebar="left">
-  ...
-</WithSidebar>
-```
-
-### Revert
-
-The way child elements are displayed is reversed.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar -revert">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar revert>
-  ...
-</WithSidebar>
-```
-
-### Content min width
-
-Min width of the content.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar" style="--unitone--content-min-width: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar contentMinWidth="500px">
-  ...
-</WithSidebar>
-```
-
-### Sidebar width
-
-Sidebar width.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar" style="--unitone--sidebar-width: 300px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar sidebarWidth="300px">
-  ...
-</WithSidebar>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="with-slider -gap:1">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar gap={1}>
-  ...
-</WithSidebar>
-```
-
-### Align items
-
-Alignment of the row direction.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="with-slider -align-items:center">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar alignItems="center">
-  ...
-</WithSidebar>
-```

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

@@ -1,124 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { WithSidebar } from '../';
-
-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: [undefined, 'start', 'center', 'end'],
-      table: { defaultValue: { summary: undefined } },
-      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--global--gap)' } },
-      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: undefined,
-    contentMinWidth: '50%',
-    gap: 2,
-    revert: false,
-    sidebar: 'right',
-    sidebarWidth: 'initial',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <WithSidebar {...args}>
-      <p>Lorem ipsum dolor sit amet</p>
-      <ul>
-        <li>Lorem</li>
-        <li>ipsum</li>
-        <li>dolor</li>
-      </ul>
-    </WithSidebar>
-  );
-};
-
-export const Revert = (args) => {
-  return (
-    <WithSidebar {...args}>
-      <p>Lorem ipsum dolor sit amet</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: -2,
-};
-
-export const MediaText = (args) => {
-  return (
-    <WithSidebar {...args}>
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>Lorem ipsum dolor sit amet</p>
-    </WithSidebar>
-  );
-};
-MediaText.storyName = 'Example : Media and text';
-MediaText.args = {
-  sidebar: 'left',
-  sidebarWidth: '300px',
-};

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Center,
-  Container,
-  ResponsiveGrid,
-  Gutters,
-  Stack,
-  Text,
-} from '@inc2734/unitone-css';
-
-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.stories.jsx

@@ -1,68 +0,0 @@
-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: '240px' } },
-      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: '240px',
-    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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Decorator, Container, Frame, Layers, ResponsiveGrid, Gutters } from '@inc2734/unitone-css';
-
-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.stories.jsx

@@ -1,67 +0,0 @@
-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: '240px' } },
-      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: '240px',
-    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

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Center,
-  Container,
-  Cover,
-  CoverContent,
-  Layers,
-  Stack,
-  Text,
-} from '@inc2734/unitone-css';
-
-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.stories.jsx

@@ -1,44 +0,0 @@
-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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Decorator, Center, Container, Gutters, Stack, Text } from '@inc2734/unitone-css';
-
-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.stories.jsx

@@ -1,44 +0,0 @@
-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

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { Decorator, Center, Container, Gutters, Stack, Text } from '@inc2734/unitone-css';
-
-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>
-);