@inc2734/unitone-css 0.46.4 → 0.47.0

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

@@ -1,71 +1,307 @@
+# Layers
+
+Elements on top of each other. Layers have a 12 x 7 (7 x 12 in portrait mode) grid, along which child layers can be shifted.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="layers">
   <img src="https://placehold.jp/400x300.jpg" alt="" />
+
   <div data-unitone-layout="decorator" style="--unitone--align-self:end">
     Lorem ipsum dolor sit amet
   </div>
 </div>
 ```
 
+### JSX
+
+```jsx
+import { Layers, Decorator } from '@inc2734/unitone-css';
+
+<Layers>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+
+  <Decorator style={{ '--unitone--align-self': 'end' }}>
+    Lorem ipsum dolor sit amet
+  </Decorator>
+</Layers>
+```
+
+## Props
+
+### Gap
+
+Gap.
+
+#### HTML
+
+```html
+<div data-unitone-layout="layers -gap:1">
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers gap={1}>
+  ...
+</Layers>
+```
+
+### Min height
+
+Min height.
+
+#### HTML
+
+```html
+<div data-unitone-layout="layers" style="--unitone--min-height: 500px">
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers minHeight="500px">
+  ...
+</Layers>
+```
+
+### Columns
+
+Number of columns.
+
+#### HTML
+
+```html
+<div data-unitone-layout="layers" style="--unitone--columns: 20">
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers columns="20">
+  ...
+</Layers>
+```
+
+### Rows
+
+Number of rows.
+
+#### HTML
+
+```html
+<div data-unitone-layout="layers" style="--unitone--rows: 20">
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers rows="20">
+  ...
+</Layers>
+```
+
 ### Covered image
 
 Background image/video is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
 
+#### HTML
+
 ```html
 <div data-unitone-layout="layers -cover">
   <img ...>
+
   <div>
     ...
   </div>
 </div>
 ```
 
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers cover>
+  <img ... />
+
+  <div>
+    ...
+  </div>
+</Layers>
+```
+
 ### Filled image
 
 The background image/video is enlarged according to the amount of content.
 
+#### HTML
+
 ```html
 <div data-unitone-layout="layers -fill">
   <img ...>
+
   <div>
     ...
   </div>
 </div>
 ```
 
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers fill>
+  <img ... />
+
+  <div>
+    ...
+  </div>
+</Layers>
+```
+
 ### Blur image
 
 Blur the background image/video.
 
+#### HTML
+
 ```html
-<div data-unitone-layout="layers -blur">
+<div data-unitone-layout="layers -blur" style="--unitone--blur: 100px">
   <img ...>
+
   <div>
     ...
   </div>
 </div>
 ```
 
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers blur style={{ '--unitone--blur': '100px' }}>
+  <img ... />
+
+  <div>
+    ...
+  </div>
+</Layers>
+```
+
 ### Portrait grid
 
+In portrait mode, swaps the height and width of the grid.
+
+#### HTML
+
 ```html
 <div data-unitone-layout="layers -portrait">
-  <img ...>
-  <div>
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers portrait>
+  ...
+</Layers>
+```
+
+### Mix blend mode
+
+You can specify how the elements should look when stacked.
+
+#### HTML
+
+```html
+<div data-unitone-layout="layers -portrait">
+  <img ... />
+
+  <div style="--unitone--mix-blend-mode: overlay">
     ...
   </div>
 </div>
 ```
 
-### Customizing position
+#### JSX
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers portrait>
+  <img ... />
+
+  <div style={{ '--unitone--mix-blend-mode': 'overlay' }}>
+    ...
+  </div>
+</Layers>
+```
+
+### Items position
+
+You can set the position of child elements with the associated properties of the CSS grid.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="layers">
   <img ...>
+
   <div style="--unitone--alilgn-self: end; --unitone--justify-self: center">
     ...
   </div>
 </div>
+
+<div data-unitone-layout="layers">
+  <img ...>
+
+  <div style="--unitone--grid-column: 1/-1; --unitone--grid-row: 1/-1">
+    ...
+  </div>
+</div>
+```
+
+```jsx
+import { Layers } from '@inc2734/unitone-css';
+
+<Layers>
+  <img ... />
+
+  <div style={{ '--unitone--alilgn-self': 'end', '--unitone--justify-self': 'center' }}>
+    ...
+  </div>
+</Layers>
+
+<Layers>
+  <img ... />
+
+  <div style={{ '--unitone--grid-column': '1/-1', '--unitone--grid-row': '1/-1' }}>
+    ...
+  </div>
+</Layers>
 ```

package/src/layout-primitives/layers/{Layers.jsx → index.jsx}

@@ -1,8 +1,23 @@
 import React from 'react';
 
-export const Layers = ({ cover, fill, blur, portrait, style, ...props }) => {
+export const Layers = ({
+  cover,
+  fill,
+  blur,
+  portrait,
+  gap,
+  minHeight,
+  columns,
+  rows,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
+    '--unitone--gap': 'undefined' !== typeof gap ? gap : undefined,
+    '--unitone--min-height': 'undefined' !== typeof minHeight ? minHeight : undefined,
+    '--unitone--columns': 'undefined' !== typeof columns ? columns : undefined,
+    '--unitone--rows': 'undefined' !== typeof rows ? rows : undefined,
   };
 
   return (

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Layers } from '../Layers';
-import { Decorator } from '../../decorator/Decorator';
+import { Layers } from '../';
+import { Decorator } from '../../decorator';
 
 export default {
   title: 'Layout Primitives/Layers',
@@ -40,12 +40,42 @@ export default {
       table: { defaultValue: { summary: false } },
       type: { name: 'boolean', 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: 'min(3.33333%,var(--unitone--grid-gap))' } },
+      type: { name: 'number', required: false },
+    },
+    minHeight: {
+      control: { type: 'text' },
+      description: 'Min height. Set by CSS var `--unitone--min-height`.',
+      table: { defaultValue: { summary: '0' } },
+      type: { name: 'string', required: false },
+    },
+    columns: {
+      control: { type: 'text' },
+      description: 'Number of columns. Set by CSS var `--unitone--columns`.',
+      table: { defaultValue: { summary: 'var(--unitone--grid-columns)' } },
+      type: { name: 'number', required: false },
+    },
+    rows: {
+      control: { type: 'text' },
+      description: 'Number of rows. Set by CSS var `--unitone--columns`.',
+      table: { defaultValue: { summary: 'var(--unitone--grid-rows)' } },
+      type: { name: 'number', required: false },
+    },
   },
   args: {
     cover: false,
     fill: false,
     blur: false,
     portrait: true,
+    gap: 'min(3.33333%,var(--unitone--grid-gap))',
+    minHeight: '0',
+    columns: 'var(--unitone--grid-columns)',
+    rows: 'var(--unitone--grid-rows)',
   },
 };
 

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

@@ -1,35 +1,38 @@
+# Reel
+
+Displays child elements in a simple horizontal scroll.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="reel">
-  <div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #eee">
-    <div data-unitone-layout="stack">
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>Lorem ipsum dolor sit amet</p>
-    </div>
-  </div>
-  <div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #eee">
-    <div data-unitone-layout="stack">
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>consectetur adipisicing elit</p>
-    </div>
-  </div>
-  <div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #eee">
-    <div data-unitone-layout="stack">
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
-    </div>
-  </div>
-  <div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #eee">
-    <div data-unitone-layout="stack">
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>Ut enim ad minim veniam</p>
-    </div>
-  </div>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
 </div>
 ```
 
-### No scrollbar
+### JSX
+
+```jsx
+import { Reel } from '@inc2734/unitone-css';
+
+<Reel>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</Reel>
+```
+
+## Props
+
+### No bar
+
+Hide bar.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="reel -no-bar">
@@ -37,7 +40,21 @@
 </div>
 ```
 
-### Customizing gap
+#### JSX
+
+```jsx
+import { Reel } from '@inc2734/unitone-css';
+
+<Reel noBar>
+  ...
+</Reel>
+```
+
+### Gap
+
+Gap.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="reel -gap:1">
@@ -45,7 +62,21 @@
 </div>
 ```
 
-### Customizing height
+#### JSX
+
+```jsx
+import { Reel } from '@inc2734/unitone-css';
+
+<Reel gap={1}>
+  ...
+</Reel>
+```
+
+### Height
+
+Height.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="reel" style="--unitone--height: 250px">
@@ -53,10 +84,32 @@
 </div>
 ```
 
-### Customizing each items width
+#### JSX
+
+```jsx
+import { Reel } from '@inc2734/unitone-css';
+
+<Reel height="250px">
+  ...
+</Reel>
+```
+
+### Items width
+
+#### HTML
 
 ```html
 <div data-unitone-layout="reel" style="--unitone--item-width: 250px">
   ...
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Reel } from '@inc2734/unitone-css';
+
+<Reel itemWidth="250px">
+  ...
+</Reel>
+```

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Reel } from '../Reel';
-import { Decorator } from '../../decorator/Decorator';
-import { Stack } from '../../stack/Stack';
+import { Reel } from '../';
+import { Decorator } from '../../decorator';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/Reel',

package/src/layout-primitives/responsive-grid/README.md

@@ -1,16 +1,38 @@
+# Responsive grid
+
+Generates a simple grid.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="responsive-grid">
-  <div data-unitone-layout="stack">
-    <img src="https://placehold.jp/400x300.jpg" alt="" />
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
-  </div>
-  ...
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
 </div>
 ```
 
-### Customizing gap
+### JSX
+
+```jsx
+import { ResponsiveGrid } from '@inc2734/unitone-css';
+
+<ResponsiveGrid>
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</ResponsiveGrid>
+```
+
+## Props
+
+### Gap
+
+Gap.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="responsive-grid -gap:1">
@@ -18,7 +40,21 @@
 </div>
 ```
 
-### Customizing auto-repeat
+#### JSX
+
+```jsx
+import { ResponsiveGrid } from '@inc2734/unitone-css';
+
+<ResponsiveGrid gap={1}>
+  ...
+</ResponsiveGrid>
+```
+
+### Auto repeat
+
+auto-fill / auto-fit for grid items.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="responsive-grid -auto-repeat:auto-fit">
@@ -26,10 +62,69 @@
 </div>
 ```
 
-### Customizing column min width.
+#### JSX
+
+```jsx
+import { ResponsiveGrid } from '@inc2734/unitone-css';
+
+<ResponsiveGrid autoRepeat="auto-fit">
+  ...
+</ResponsiveGrid>
+```
+
+### Columns min width.
+
+Min width of each columns.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="responsive-grid" style="--unitone--column-min-width: 240px">
   ...
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { ResponsiveGrid } from '@inc2734/unitone-css';
+
+<ResponsiveGrid minWidth="240px">
+  ...
+</ResponsiveGrid>
+```
+
+### Divider
+
+Using divider.
+
+stripe / underline / bordered
+
+#### HTML
+
+```html
+<div data-unitone-layout="responsive-grid -divider:stripe">
+  <div>
+    ...
+  </div>
+  <div>
+    ...
+  </div>
+</div>
+```
+
+#### JSX
+
+```jsx
+import { ResponsiveGrid } from '@inc2734/unitone-css';
+
+<ResponsiveGrid divider="stripe">
+  <div>
+    ...
+  </div>
+  <div>
+    ...
+  </div>
+</ResponsiveGrid>
+```
+

package/src/layout-primitives/responsive-grid/{ResponsiveGrid.jsx → index.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const ResponsiveGrid = ({ columnMinWidth, gap, autoRepeat, style, ...props }) => {
+export const ResponsiveGrid = ({ columnMinWidth, gap, autoRepeat, divider, style, ...props }) => {
   style = {
     ...style,
     '--unitone--column-min-width': !!columnMinWidth ? columnMinWidth : undefined,
@@ -12,6 +12,7 @@ export const ResponsiveGrid = ({ columnMinWidth, gap, autoRepeat, style, ...prop
         'responsive-grid',
         'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
         'undefined' !== typeof autoRepeat ? `-auto-repeat:${autoRepeat}` : undefined,
+        !!divider ? `-divider:${divider}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}