@inc2734/unitone-css 0.46.4 → 0.47.0

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

@@ -1,57 +1,179 @@
+# 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>
 ```
 
-### Customizing padding
+### 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 -padding:1">
+<div data-unitone-layout="decorator" style="--unitone--background-color: red">
   ...
 </div>
 ```
 
-### With shadow
+#### JSX
+
+```jsx
+import { Decorator } from '@inc2734/unitone-css';
+
+<Decorator backgroundColor="red">
+  ...
+</Decorator>
+```
+
+### Color
+
+Color.
+
+#### HTML
 
 ```html
-<div data-unitone-layout="decorator -shadow">
+<div data-unitone-layout="decorator" style="--unitone--color: red">
   ...
 </div>
 ```
 
-### Customizing position
+#### JSX
+
+```jsx
+import { Decorator } from '@inc2734/unitone-css';
+
+<Decorator color="red">
+  ...
+</Decorator>
+```
+
+### Border
+
+Border.
 
-After the `position`, specify the position with `-position:{position}`.
+#### HTML
 
 ```html
-<div data-unitone-layout="decorator -position:relative">
+<div data-unitone-layout="decorator" style="--unitone--border-width: 1px; --unitone--border-color: #000; --unitone--border-radius: 4px">
   ...
 </div>
 ```
 
-### Customizing offset
+#### 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 -position:relative" style="--unitone--top: 1px; --unitone--right: 1px; --unitone--bottom: 1px; --unitone--left: 1px">
+<div data-unitone-layout="decorator -padding:1">
   ...
 </div>
 ```
 
-### Customizing z-index
+#### 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--z-index: 1">
+<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>
 ```
 
-### Customizing overflow
+#### 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,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Decorator } from '../Decorator';
-import { Stack } from '../../stack/Stack';
+import { Decorator } from '../';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/Decorator',

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

@@ -1,5 +1,9 @@
+# Float
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="float">
   <img src="https://placehold.jp/400x300.jpg" alt="" />
@@ -7,7 +11,26 @@
 <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>
 ```
 
-### Float right
+### 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">
@@ -15,10 +38,78 @@
 </div>
 ```
 
-### Customizing gap
+#### 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>
+```

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Float } from '../Float';
+import { Float } from '../';
 
 export default {
   title: 'Layout Primitives/Float',
@@ -21,13 +21,13 @@ export default {
     minMeasure: {
       control: { type: 'text' },
       description:
-        'Min size of the item following the floating item. Set by CSS var `--unitone--min-measure`.',
+        'Min width of the item following the floating item. Set by CSS var `--unitone--min-measure`.',
       table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
       type: { name: 'string', required: false },
     },
     minWidth: {
       control: { type: 'text' },
-      description: 'Min size of the floating item. Set by CSS var `--unitone--min-width`.',
+      description: 'Min width of the floating item. Set by CSS var `--unitone--min-width`.',
       table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
       type: { name: 'string', required: false },
     },

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

@@ -1,15 +1,67 @@
+# Frame
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="frame">
   <img src="https://placehold.jp/400x300.jpg" alt="" />
 </div>
 ```
 
-### Switch aspect ratio when portrait
+### JSX
+
+```jsx
+import { Frame } from '@inc2734/unitone-css';
+
+<Frame>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</Frame>
+```
+
+## Props
+
+### Ratio
+
+Aspect ratio.
+
+#### HTML
+
+```html
+<div data-unitone-layout="frame" style="--unitone--aspect-ratio: 16/9">
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Frame } from '@inc2734/unitone-css';
+
+<Frame aspectRatio="16/9">
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</Frame>
+```
+
+### Switch
+
+Switch aspect ratio when portrait.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="frame -switch">
   <img src="https://placehold.jp/400x300.jpg" alt="" />
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Frame } from '@inc2734/unitone-css';
+
+<Frame switch>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</Frame>
+```

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Frame } from '../Frame';
+import { Frame } from '../';
 
 export default {
   title: 'Layout Primitives/Frame',

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

@@ -1,23 +1,47 @@
+# Gutters
+
+Separate content with top and bottom padding.
+
 ## Usage
 
+### HTML
+
 ```html
-<div data-unitone-layout="section">
-  <div data-unitone-layout="stack">
-    <h2>Lorem ipsum dolor sit amet</h2>
-    <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>
-  </div>
+<div data-unitone-layout="gutters">
+  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>
 ```
 
-### Customizing padding
+### JSX
+
+```jsx
+import { Gutters } from '@inc2734/unitone-css';
+
+<Gutters>
+  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
+</Gutters>
+```
+
+## Props
+
+### Padding
+
+Top and bottom padding.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="section -padding:1">
   ...
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Gutters } from '@inc2734/unitone-css';
+
+<Gutters padding={1}>
+  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
+</Gutters>
+```

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Gutters } from '../Gutters';
-import { Center } from '../../center/Center';
-import { Container } from '../../container/Container';
-import { Stack } from '../../stack/Stack';
+import { Gutters } from '../';
+import { Center } from '../../center';
+import { Container } from '../../container';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/Gutters',

package/src/layout-primitives/index.js

@@ -0,0 +1,17 @@
+export { BothSides } from './both-sides';
+export { Center } from './center';
+export { Cluster } from './cluster';
+export { Container } from './container';
+export { Cover, CoverContent } from './cover';
+export { Decorator } from './decorator';
+export { Float } from './float';
+export { Frame } from './frame';
+export { Gutters } from './gutters';
+export { Layers } from './layers';
+export { Reel } from './reel';
+export { ResponsiveGrid } from './responsive-grid';
+export { Stack } from './stack';
+export { Switcher } from './switcher';
+export { Text } from './text';
+export { VerticalWriting } from './vertical-writing';
+export { WithSidebar } from './with-sidebar';