@inc2734/unitone-css 0.47.3 → 0.48.0

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

@@ -1,133 +0,0 @@
-# Cluster
-
-Arranges child elements horizontally.
-
-## Usage
-
-### HTML
-
-```html
-<ul data-unitone-layout="cluster">
-  <li>Lorem ipsum</li>
-  <li>dolor sit</li>
-  <li>amet consectetur</li>
-  <li>adipisicing elit</li>
-  <li>sed do</li>
-</ul>
-```
-
-### JSX
-
-```jsx
-import { Cluster } from '@inc2734/unitone-css';
-
-<Cluster tagName="ul">
-  <li>Lorem ipsum</li>
-  <li>dolor sit</li>
-  <li>amet consectetur</li>
-  <li>adipisicing elit</li>
-  <li>sed do</li>
-</Cluster>
-```
-
-## Props
-
-### Align items
-
-Alignment of the row direction.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="cluster -align-items:center">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { Cluster } from '@inc2734/unitone-css';
-
-<Cluster tagName="ul" alignItems="center">
-  ...
-</Cluster>
-```
-
-### Justify content
-
-#### HTML
-
-Alignment of the column direction.
-
-```html
-<ul data-unitone-layout="cluster -justify-content:space-between">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { Cluster } from '@inc2734/unitone-css';
-
-<Cluster tagName="ul" justifyContent="space-between">
-  ...
-</Cluster>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="cluster -gap:1">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { Cluster } from '@inc2734/unitone-css';
-
-<Cluster tagName="ul" gap={1}>
-  ...
-</Cluster>
-```
-
-### Divider
-
-Using divider.
-
-stripe / slash / bordered
-
-#### HTML
-
-```html
-<div data-unitone-layout="cluster -divider:stripe">
-  <div>
-    ...
-  </div>
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cluster } from '@inc2734/unitone-css';
-
-<Cluster divider="stripe">
-  <div>
-    ...
-  </div>
-  <div>
-    ...
-  </div>
-</Cluster>
-```

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

@@ -1,135 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Cluster } from '../';
-
-export default {
-  title: 'Layout Primitives/Cluster',
-  component: Cluster,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    alignItems: {
-      control: { type: 'inline-radio' },
-      description: '`--unitone--align-items`',
-      description:
-        'Alignment of the row direction. Set by CSS var `--unitone--align-items` or `data-unitone-layout` attribute `-align-items:x`.',
-      options: ['start', 'center', 'end'],
-      table: { defaultValue: { summary: 'start' } },
-      type: { name: 'string', 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: 'var(--unitone--global--gap)' } },
-      type: { name: 'number', required: false },
-    },
-    justifyContent: {
-      control: { type: 'inline-radio' },
-      description:
-        'Alignment of the column direction. Set by CSS var `--unitone--justify-content` or `data-unitone-layout` attribute `-justify-content:x`.',
-      options: ['start', 'center', 'end', 'space-between'],
-      table: { defaultValue: { summary: 'start' } },
-      type: { name: 'string', required: false },
-    },
-    divider: {
-      control: { type: 'inline-radio' },
-      description: 'Divider. Set by `data-unitone-layout` attribute `-divider:x`.',
-      options: [undefined, 'stripe', 'slash', 'bordered'],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    tagName: {
-      table: { disable: true },
-    },
-  },
-  args: {
-    alignItems: 'start',
-    gap: 1,
-    justifyContent: 'start',
-    divider: undefined,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Cluster tagName="ul" {...args}>
-      <li>Lorem ipsum</li>
-      <li>dolor sit</li>
-      <li>amet consectetur</li>
-      <li>adipisicing elit</li>
-      <li>sed do</li>
-    </Cluster>
-  );
-};
-
-export const ExampleHeader = (args) => {
-  return (
-    <Cluster gap={args.gap} justifyContent="space-between" alignItems="center">
-      <div>LOGO</div>
-      <Cluster tagName="ul" gap={args.gap}>
-        <li>Lorem ipsum</li>
-        <li>dolor sit</li>
-        <li>amet consectetur</li>
-        <li>adipisicing elit</li>
-        <li>sed do</li>
-      </Cluster>
-    </Cluster>
-  );
-};
-ExampleHeader.storyName = 'Example : Header';
-ExampleHeader.argTypes = {
-  justifyContent: { table: { disable: true } },
-  alignItems: { table: { disable: true } },
-};
-
-export const ExampleStripe = (args) => {
-  return (
-    <Cluster {...args}>
-      <div>Lorem ipsum</div>
-      <div>dolor sit</div>
-      <div>amet consectetur</div>
-      <div>adipisicing elit</div>
-      <div>sed do</div>
-    </Cluster>
-  );
-};
-ExampleStripe.args = {
-  divider: 'stripe',
-};
-ExampleStripe.storyName = 'Example : Stripe';
-
-export const ExampleSlash = (args) => {
-  return (
-    <Cluster {...args}>
-      <div>Lorem ipsum</div>
-      <div>dolor sit</div>
-      <div>amet consectetur</div>
-      <div>adipisicing elit</div>
-      <div>sed do</div>
-    </Cluster>
-  );
-};
-ExampleSlash.args = {
-  divider: 'slash',
-};
-ExampleSlash.storyName = 'Example : Slash';
-
-export const ExampleBordered = (args) => {
-  return (
-    <Cluster {...args}>
-      <div>Lorem ipsum</div>
-      <div>dolor sit</div>
-      <div>amet consectetur</div>
-      <div>adipisicing elit</div>
-      <div>sed do</div>
-    </Cluster>
-  );
-};
-ExampleBordered.args = {
-  divider: 'bordered',
-};
-ExampleBordered.storyName = 'Example : Bordered';

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

@@ -1,93 +0,0 @@
-# Container
-
-Keep the content area within a certain width, plus appropriate margins on the left and right.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="container">
-  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 { Container } from '@inc2734/unitone-css';
-
-<Container>
-  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
-</Container>
-```
-
-## Props
-
-### Gutters
-
-Gutters.
-
-#### HTML
-
-```html
-<div data-unitone-layout="container -gutters:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Container } from '@inc2734/unitone-css';
-
-<Container gutters={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
-</Container>
-```
-
-### Align
-
-Alignment of the container.
-
-start / center / end
-
-#### HTML
-
-```html
-<div data-unitone-layout="container -align:start">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Container } from '@inc2734/unitone-css';
-
-<Container align="start">
-  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
-</Container>
-```
-
-### Max width
-
-Max width.
-
-#### HTML
-
-```html
-<div data-unitone-layout="container" style="--unitone--max-width: 1280px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Container } from '@inc2734/unitone-css';
-
-<Container maxWidth="1280px">
-  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
-</Container>
-```

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Container } from '../';
-import { Text } from '../../text';
-
-export default {
-  title: 'Layout Primitives/Container',
-  component: Container,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    align: {
-      control: { type: 'inline-radio' },
-      description: 'Alignment of the container. Set by `data-unitone-layout` attribute `-align:x`.',
-      options: ['start', 'center', 'end'],
-      table: { defaultValue: { summary: '' } },
-      type: { name: 'string', required: false },
-    },
-    gutters: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gutters. Set by CSS var `--unitone--gutters` or `data-unitone-layout` attribute `-gutters:x`.',
-      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 'root'],
-      table: { defaultValue: { summary: 'var(--unitone--global--gutters)' } },
-      type: { name: 'number', required: false },
-    },
-    maxWidth: {
-      control: { type: 'text' },
-      description: 'Max width. Set by CSS var `--unitone--max-width`.',
-      table: { defaultValue: { summary: '1280px' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    align: undefined,
-    gutters: undefined,
-    maxWidth: '1280px',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Container {...args}>
-      <Text maxWidth="inherit">
-        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</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>
-
-        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-        <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>
-      </Text>
-    </Container>
-  );
-};

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

@@ -1,195 +0,0 @@
-# Cover
-
-This component is designed to cover a large area of the screen.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
-  <div data-unitone-layout="cover">
-    <p>Lorem ipsum</p>
-
-    <div data-unitone-layout="cover__content -valign:center">
-      <div data-unitone-layout="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>
-      </div>
-    </div>
-
-    <p>sed do</p>
-  </div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Decorator, Cover, CoverContent, Stack } from '@inc2734/unitone-css';
-
-<Decorator backgroundColor="#000" color="#fff" padding={0}>
-  <Cover>
-    <p>Lorem ipsum</p>
-
-    <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>
-
-    <p>sed do</p>
-  </Cover>
-</Decorator>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-Since this is also reflected in the padding, specify 0 for padding if padding is not required.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover gap={1}>
-  ...
-</Cover>
-```
-
-### Padding
-
-Padding.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover -padding:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover padding={1}>
-  ...
-</Cover>
-```
-
-### Min height
-
-Min height.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover" style="--unitone--min-height: 80vh">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover } from '@inc2734/unitone-css';
-
-<Cover minHeight="80vh">
-  ...
-</Cover>
-```
-
-### Item position
-
-You can specify the position of a child element.
-
-#### HTML
-
-```html
-<div data-unitone-layout="cover">
-  <div data-unitone-layout="cover__content -position:fixed" style="--unitone--top: 0; --unitone--right: 0; --unitone--bottom: 0; --unitone--left: 0; --uitone--z-index: 1">
-    ...
-  </div>
-
-  <div data-unitone-layout="cover__content">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Cover, CoverContent } from '@inc2734/unitone-css';
-
-<Cover gap={1}>
-  <CoverContent position="fixed" top="0" right="0" bottom="0" left="0" zIndex="1">
-    ...
-  </CoverContent>
-
-  <CoverContent>
-    ...
-  </CoverContent>
-</Cover>
-```
-
-### Item valign
-
-You can specify the vertical position of a child element.
-
-#### HTML
-
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
-  <div data-unitone-layout="cover">
-    <div data-unitone-layout="cover__content valign:top">
-      Lorem ipsum
-    </div>
-
-    <div data-unitone-layout="cover__content valign:bottom">
-      Lorem ipsum
-    </div>
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Decorator, Cover, CoverContent } from '@inc2734/unitone-css';
-
-<Decorator backgroundColor="#000" color="#fff" padding={0}>
-  <Cover>
-    <CoverContent valign="top">
-      Lorem ipsum
-    </CoverContent>
-
-    <CoverContent valign="bottom">
-      Lorem ipsum
-    </CoverContent>
-
-    <p>sed do</p>
-  </Cover>
-</Decorator>
-```