@inc2734/unitone-css 0.47.3 → 0.48.0

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>
-```

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

@@ -1,198 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Decorator } from '../';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Decorator',
-  component: Decorator,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      description: 'Background color. Set by CSS var `--unitone--background-color`.',
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    borderColor: {
-      control: { type: 'color' },
-      description: 'Border color. Set by CSS var `--unitone--border-color`.',
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    borderRadius: {
-      control: { type: 'text' },
-      description: 'Border radius. Set by CSS var `--unitone--border-radius`.',
-      table: { defaultValue: { summary: '0' } },
-      type: { name: 'string', required: false },
-    },
-    borderWidth: {
-      control: { type: 'text' },
-      description: 'Border width. Set by CSS var `--unitone--border-width`.',
-      table: { defaultValue: { summary: '0' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      description: 'Text color. Set by CSS var `--unitone--color`.',
-      table: { defaultValue: { summary: 'inherit' } },
-      type: { name: 'string', 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: '0px' } },
-      type: { name: 'number', required: false },
-    },
-    shadow: {
-      control: { type: 'inline-radio' },
-      description: 'With `box-shadow`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    position: {
-      control: { type: 'inline-radio' },
-      description: 'The position value.',
-      options: ['static', 'relative', 'absolute', 'sticky', 'fixed'],
-      table: { defaultValue: { summary: 'static' } },
-      type: { name: 'string', required: false },
-    },
-    top: {
-      control: { type: 'text' },
-      description: 'Offset top.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    right: {
-      control: { type: 'text' },
-      description: 'Offset right.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    bottom: {
-      control: { type: 'text' },
-      description: 'Offset bottom.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    left: {
-      control: { type: 'text' },
-      description: 'Offset left.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    zIndex: {
-      control: { type: 'text' },
-      description: 'z-index.',
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-    overflow: {
-      control: { type: 'inline-radio' },
-      description: 'The overflow value.',
-      options: ['visible', 'hidden', 'scroll'],
-      table: { defaultValue: { summary: 'visible' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    backgroundColor: 'transarent',
-    borderColor: 'transparent',
-    borderRadius: '0px',
-    borderWidth: '0px',
-    color: 'initial',
-    padding: 0,
-    shadow: false,
-    position: 'static',
-    top: 'initial',
-    right: 'initial',
-    bottom: 'initial',
-    left: 'initial',
-    zIndex: 'initial',
-    overflow: 'visible',
-  },
-};
-
-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 (
-    <Decorator {...args}>
-      <p>{content}</p>
-    </Decorator>
-  );
-};
-
-export const ExampleShadow = (args) => {
-  return (
-    <Decorator {...args}>
-      <p>{content}</p>
-    </Decorator>
-  );
-};
-ExampleShadow.storyName = 'Example : Shadow';
-ExampleShadow.argTypes = {
-  shadow: { table: { disable: true } },
-};
-ExampleShadow.args = {
-  padding: 1,
-  shadow: true,
-};
-
-export const ExampleCombobox = (args) => {
-  return (
-    <Decorator borderWidth={args.borderWidth} borderColor={args.backgroundColor}>
-      <Decorator
-        padding={args.padding}
-        backgroundColor={args.backgroundColor}
-        color="var(--unitone--color--white)"
-      >
-        Combo Box
-      </Decorator>
-      <Decorator padding={args.padding}>
-        <p>{content}</p>
-      </Decorator>
-    </Decorator>
-  );
-};
-ExampleCombobox.storyName = 'Example : Combobox';
-ExampleCombobox.argTypes = {
-  color: { table: { disable: true } },
-  borderColor: { table: { disable: true } },
-};
-ExampleCombobox.args = {
-  padding: -1,
-  backgroundColor: '#000',
-  borderWidth: '1px',
-};
-
-export const ExamplePosition = (args) => {
-  return (
-    <Decorator position="relative">
-      <Stack>
-        <Decorator backgroundColor="#000" color="#fff" padding={1}>
-          {content}
-        </Decorator>
-        <Decorator {...args}>{content}</Decorator>
-        <Decorator backgroundColor="#000" color="#fff" padding={1}>
-          {content}
-        </Decorator>
-      </Stack>
-    </Decorator>
-  );
-};
-ExamplePosition.storyName = 'Example : Position';
-ExamplePosition.args = {
-  padding: -1,
-  borderWidth: '1px',
-  backgroundColor: 'rgba(255, 0, 0, .7)',
-  position: 'absolute',
-  top: '100px',
-};

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

@@ -1,115 +0,0 @@
-# Float
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="float">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-<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>
-```
-
-### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</Float>
-<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>
-```
-
-## Props
-
-### Position
-
-Change floating position.
-
-left / right
-
-#### HTML
-
-```html
-<div data-unitone-layout="float -right">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float position="right">
-  ...
-</Float>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float gap={1}>
-  ...
-</Float>
-```
-
-### Min width
-
-Min width of the floating item.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float" style="--unitone--min-width: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float minWidth="500px">
-  ...
-</Float>
-```
-
-### Min measure.
-
-Min width of the item following the floating item.
-
-#### HTML
-
-```html
-<div data-unitone-layout="float" style="--unitone--min-measure: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Float } from '@inc2734/unitone-css';
-
-<Float minMeasure="500px">
-  ...
-</Float>
-```