@inc2734/unitone-css 0.47.3 → 0.48.0

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

@@ -1,187 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Layers } from '../';
-import { Decorator } from '../../decorator';
-
-export default {
-  title: 'Layout Primitives/Layers',
-  component: Layers,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    cover: {
-      control: { type: 'inline-radio' },
-      description:
-        "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.",
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    fill: {
-      control: { type: 'inline-radio' },
-      description: 'The background image/video is enlarged according to the amount of content.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    blur: {
-      control: { type: 'inline-radio' },
-      description: 'Blur the background image/video.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    portrait: {
-      control: { type: 'inline-radio' },
-      description: 'In portrait mode, swaps the height and width of the grid.',
-      options: [false, true],
-      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)',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Layers {...args}>
-      <img src="https://placehold.jp/600x400.jpg" alt="" />
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet 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 cillLorem 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
-        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 cillLorem 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>
-    </Layers>
-  );
-};
-
-export const ExamplePicture = (args) => {
-  return (
-    <Layers {...args}>
-      <picture>
-        <img src="https://placehold.jp/600x400.jpg" alt="" />
-      </picture>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet 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 cillLorem 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
-        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 cillLorem 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>
-    </Layers>
-  );
-};
-ExamplePicture.storyName = 'Example : picture';
-
-export const ExampleFigure = (args) => {
-  return (
-    <Layers {...args}>
-      <figure>
-        <img src="https://placehold.jp/600x400.jpg" alt="" />
-      </figure>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet 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 cillLorem 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
-        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 cillLorem 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>
-    </Layers>
-  );
-};
-ExampleFigure.storyName = 'Example : figure';
-
-export const ExampleFigurePicture = (args) => {
-  return (
-    <Layers {...args}>
-      <figure>
-        <picture>
-          <img src="https://placehold.jp/600x400.jpg" alt="" />
-        </picture>
-      </figure>
-      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1} position="relative">
-        Lorem ipsum dolor sit amet 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 cillLorem 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
-        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 cillLorem 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>
-    </Layers>
-  );
-};
-ExampleFigurePicture.storyName = 'Example : figure > picture';

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

@@ -1,115 +0,0 @@
-# Reel
-
-Displays child elements in a simple horizontal scroll.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="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="" />
-</div>
-```
-
-### 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">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Reel } from '@inc2734/unitone-css';
-
-<Reel noBar>
-  ...
-</Reel>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="reel -gap:1">
-  ...
-</div>
-```
-
-#### 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">
-  ...
-</div>
-```
-
-#### 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,80 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Reel } from '../';
-import { Decorator } from '../../decorator';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Reel',
-  component: Reel,
-  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 },
-    },
-    height: {
-      control: { type: 'text' },
-      description: 'Height. Set by CSS var `--unitone--height`.',
-      table: { defaultValue: { summary: 'auto' } },
-      type: { name: 'string', required: false },
-    },
-    itemWidth: {
-      control: { type: 'text' },
-      description: 'Each items width. Set by CSS var `--unitone--item-width`.',
-      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
-      type: { name: 'string', required: false },
-    },
-    noBar: {
-      control: { type: 'inline-radio' },
-      description: 'Remove scrollbar.',
-      options: [false, true],
-      table: { defaultValue: { summary: 'false' } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    height: 'auto',
-    itemWidth: 'calc(var(--unitone--measure) / 2)',
-    noBar: false,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Reel {...args}>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>Lorem ipsum dolor sit amet</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>consectetur adipisicing elit</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
-        </Stack>
-      </Decorator>
-      <Decorator backgroundColor="#eee" padding={1}>
-        <Stack>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>Ut enim ad minim veniam</p>
-        </Stack>
-      </Decorator>
-    </Reel>
-  );
-};

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

@@ -1,130 +0,0 @@
-# Responsive grid
-
-Generates a simple grid.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="responsive-grid">
-  <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>
-```
-
-### 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">
-  ...
-</div>
-```
-
-#### 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">
-  ...
-</div>
-```
-
-#### 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>
-```
-