@inc2734/unitone-css 0.47.2 → 0.48.0

package/src/layout-primitives/cover/README.md

@@ -1,195 +0,0 @@
-# Cover
-
-This component is designed to cover a large area of the screen.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
-  <div data-unitone-layout="cover">
-    <p>Lorem ipsum</p>
-
-    <div data-unitone-layout="cover__content -valign:center">
-      <div data-unitone-layout="stack">
-        <h1 style="--unitone--font-size: 6">Lorem ipsum dolor sit amet</h1>
-        <p>
-          consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </p>
-      </div>
-    </div>
-
-    <p>sed do</p>
-  </div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Decorator, Cover, CoverContent, Stack } from '@inc2734/unitone-css';
-
-<Decorator backgroundColor="#000" color="#fff" padding={0}>
-  <Cover>
-    <p>Lorem ipsum</p>
-
-    <CoverContent valign="center">
-      <Stack>
-        <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-        <p>
-          consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </p>
-      </Stack>
-    </CoverContent>
-
-    <p>sed do</p>
-  </Cover>
-</Decorator>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-Since this is also reflected in the padding, specify 0 for padding if padding is not required.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover gap={1}>
-  ...
-</Cover>
-```
-
-### Padding
-
-Padding.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover -padding:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover padding={1}>
-  ...
-</Cover>
-```
-
-### Min height
-
-Min height.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover" style="--unitone--min-height: 80vh">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover minHeight="80vh">
-  ...
-</Cover>
-```
-
-### Item position
-
-You can specify the position of a child element.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover">
-  <div data-unitone-layout="cover__content -position:fixed" style="--unitone--top: 0; --unitone--right: 0; --unitone--bottom: 0; --unitone--left: 0; --uitone--z-index: 1">
-    ...
-  </div>
-
-  <div data-unitone-layout="cover__content">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover, CoverContent } from '@inc2734/unitone-css';
-
-<Cover gap={1}>
-  <CoverContent position="fixed" top="0" right="0" bottom="0" left="0" zIndex="1">
-    ...
-  </CoverContent>
-
-  <CoverContent>
-    ...
-  </CoverContent>
-</Cover>
-```
-
-### Item valign
-
-You can specify the vertical position of a child element.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
-  <div data-unitone-layout="cover">
-    <div data-unitone-layout="cover__content valign:top">
-      Lorem ipsum
-    </div>
-
-    <div data-unitone-layout="cover__content valign:bottom">
-      Lorem ipsum
-    </div>
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator, Cover, CoverContent } from '@inc2734/unitone-css';
-
-<Decorator backgroundColor="#000" color="#fff" padding={0}>
-  <Cover>
-    <CoverContent valign="top">
-      Lorem ipsum
-    </CoverContent>
-
-    <CoverContent valign="bottom">
-      Lorem ipsum
-    </CoverContent>
-
-    <p>sed do</p>
-  </Cover>
-</Decorator>
-```

package/src/layout-primitives/cover/stories/index.stories.jsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Cover, CoverContent } from '../';
-import { Decorator } from '../../decorator';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Cover',
-  component: Cover,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    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 },
-    },
-    padding: {
-      control: { type: 'inline-radio' },
-      description:
-        'Padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: '0var(--unitone--global--gap)' } },
-      type: { name: 'number', required: false },
-    },
-    minHeight: {
-      control: { type: 'text' },
-      description: 'Min height. Set by CSS var `--unitone--min-height`.',
-      table: { defaultValue: { summary: '100vh' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    padding: 2,
-    minHeight: '100vh',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <p>Lorem ipsum</p>
-        <CoverContent>
-          <Stack>
-            <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-            <p>
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua.
-            </p>
-          </Stack>
-        </CoverContent>
-        <p>Lorem ipsum</p>
-      </Cover>
-    </Decorator>
-  );
-};
-
-export const ExampleHeader = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <CoverContent valign="top">
-          <Stack>
-            <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-            <p>
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua.
-            </p>
-          </Stack>
-        </CoverContent>
-      </Cover>
-    </Decorator>
-  );
-};
-ExampleHeader.storyName = 'Example : Header';
-ExampleHeader.args = {
-  minHeight: '80vh',
-};
-
-export const ExampleFooter = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <CoverContent valign="bottom">
-          <Stack>
-            <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-            <p>
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua.
-            </p>
-          </Stack>
-        </CoverContent>
-      </Cover>
-    </Decorator>
-  );
-};
-ExampleFooter.storyName = 'Example : Footer';
-ExampleFooter.args = {
-  minHeight: '80vh',
-};
-
-export const ExampleHeaderFooter = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <CoverContent valign="top">
-          <p>Lorem ipsum</p>
-        </CoverContent>
-
-        <CoverContent valign="bottom">
-          <p>Lorem ipsum</p>
-        </CoverContent>
-      </Cover>
-    </Decorator>
-  );
-};
-ExampleHeaderFooter.storyName = 'Example : Header Footer';
-ExampleHeaderFooter.args = {
-  minHeight: '80vh',
-};
-
-export const ExampleHeaderCenter = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <CoverContent valign="top">
-          <p>Lorem ipsum</p>
-        </CoverContent>
-
-        <CoverContent valign="center">
-          <Stack>
-            <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-            <p>
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua.
-            </p>
-          </Stack>
-        </CoverContent>
-      </Cover>
-    </Decorator>
-  );
-};
-ExampleHeaderCenter.storyName = 'Example : Header Center';
-ExampleHeaderCenter.args = {
-  minHeight: '80vh',
-};
-
-export const ExampleCenterFooter = (args) => {
-  return (
-    <Decorator backgroundColor="#000" color="#fff">
-      <Cover {...args}>
-        <CoverContent valign="center">
-          <Stack>
-            <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
-            <p>
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-              magna aliqua.
-            </p>
-          </Stack>
-        </CoverContent>
-
-        <CoverContent valign="bottom">
-          <p>Lorem ipsum</p>
-        </CoverContent>
-      </Cover>
-    </Decorator>
-  );
-};
-ExampleCenterFooter.storyName = 'Example : Center Footer';
-ExampleCenterFooter.args = {
-  minHeight: '80vh',
-};

package/src/layout-primitives/decorator/README.md

@@ -1,179 +0,0 @@
-# Decorator
-
-Decorative blocks. Color, padding, position, etc. can be set.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="decorator">
-  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
-</div>
-```
-
-### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator>
-  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
-</Decorator>
-```
-
-## Props
-
-### Background color
-
-Background color.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: red">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator backgroundColor="red">
-  ...
-</Decorator>
-```
-
-### Color
-
-Color.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--color: red">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator color="red">
-  ...
-</Decorator>
-```
-
-### Border
-
-Border.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--border-width: 1px; --unitone--border-color: #000; --unitone--border-radius: 4px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator borderWidth="1px" borderColor="#000" borderRadius="4px">
-  ...
-</Decorator>
-```
-
-### Padding
-
-Padding.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator -padding:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator padding={1}>
-  ...
-</Decorator>
-```
-
-### Position
-
-Position.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator -position:relative" style="--unitone--top: 0; --unitone--right: 0; --unitone--bottom: 0; --unitone--left: 0; --unitone--z-index: 1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator position="relative" top="0" right="0" bottom="0" left="0" zIndex="1">
-  ...
-</Decorator>
-```
-
-### Overflow
-
-Overflow.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator -overflow:hidden">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator overflow="hidden">
-  ...
-</Decorator>
-```
-
-### With shadow
-
-Add a box shadow.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator -shadow">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator shadow>
-  ...
-</Decorator>
-```