@inc2734/unitone-css 0.47.3 → 0.48.0

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Float } from '../';
-
-export default {
-  title: 'Layout Primitives/Float',
-  component: Float,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    gap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gap between items. 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 },
-    },
-    minMeasure: {
-      control: { type: 'text' },
-      description:
-        '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 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 },
-    },
-    position: {
-      control: { type: 'inline-radio' },
-      description:
-        'The floating item position. Set by `data-unitone-layout` attribute `-right` or `-left`.',
-      options: ['left', 'right'],
-      table: { defaultValue: { summary: 'left' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    minMeasure: 'calc(var(--unitone--measure) / 2)',
-    minWidth: 'calc(var(--unitone--measure) / 2)',
-    position: 'left',
-  },
-};
-
-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 (
-    <>
-      <Float {...args}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-      </Float>
-      <p>{content}</p>
-    </>
-  );
-};
-
-export const ExampleRight = (args) => {
-  return (
-    <>
-      <Float {...args}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-      </Float>
-      <p>{content}</p>
-    </>
-  );
-};
-ExampleRight.storyName = 'Example : Right';
-ExampleRight.args = {
-  position: 'right',
-};

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

@@ -1,67 +0,0 @@
-# Frame
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="frame">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-### 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,50 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Frame } from '../';
-
-export default {
-  title: 'Layout Primitives/Frame',
-  component: Frame,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    ratio: {
-      control: { type: 'text' },
-      description: 'Aspect ratio. Set by CSS var `--unitone--ratio`.',
-      table: { defaultValue: { summary: '16/9' } },
-      type: { name: 'string', required: false },
-    },
-    switchRatio: {
-      control: { type: 'inline-radio' },
-      description: 'When the orientation switches, the `--unitone--ratio` also switches.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    ratio: '16/9',
-    switchRatio: false,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Frame {...args}>
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-    </Frame>
-  );
-};
-
-export const Switch = (args) => {
-  return (
-    <Frame {...args}>
-      <img src="https://placehold.jp/400x300.jpg" alt="" />
-    </Frame>
-  );
-};
-Switch.args = {
-  switchRatio: true,
-};

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

@@ -1,47 +0,0 @@
-# Gutters
-
-Separate content with top and bottom padding.
-
-## Usage
-
-### HTML
-
-```html
-<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>
-```
-
-### 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,48 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Gutters } from '../';
-import { Center } from '../../center';
-import { Container } from '../../container';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Gutters',
-  component: Gutters,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    padding: {
-      control: { type: 'inline-radio' },
-      description:
-        'Top and bottom padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
-      options: [1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'var(--unitone--s4)' } },
-      type: { name: 'number', required: false },
-    },
-  },
-  args: {
-    padding: 4,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Gutters {...args}>
-      <Container>
-        <Stack gap={3}>
-          <Center>
-            <h2 style={{ '--unitone--font-size': 2 }}>Lorem ipsum dolor sit amet</h2>
-          </Center>
-          <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>
-        </Stack>
-      </Container>
-    </Gutters>
-  );
-};

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

@@ -1,307 +0,0 @@
-# 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" 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">
-  ...
-</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>
-```
-
-#### 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>
-```