@inc2734/unitone-css 0.47.2 → 0.48.0

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

@@ -1,113 +0,0 @@
-# Center
-
-Center the box. Settings also allow for centering of child elements and centering of text.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="center">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</div>
-```
-
-### JSX
-
-```jsx
-import { Center } from '@inc2734/unitone-css';
-
-<Center>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</Center>
-```
-
-## Props
-
-### Intrinsic centering
-
-Child elements are also centered.
-
-#### HTML
-
-```html
-<div data-unitone-layout="center -intrinsic">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Center } from '@inc2734/unitone-css';
-
-<Center intrinsic>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</Center>
-```
-
-### Centering with text
-
-Text is also centered.
-
-#### HTML
-
-```html
-<div data-unitone-layout="center -with-text">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Center } from '@inc2734/unitone-css';
-
-<Center withText>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</Center>
-```
-
-### Gutters
-
-Gutters.
-
-#### HTML
-
-```html
-<div data-unitone-layout="center -gutters:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Center } from '@inc2734/unitone-css';
-
-<Center gutters={1}>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</Center>
-```
-
-### Max width
-
-Max width.
-
-#### HTML
-
-```html
-<div data-unitone-layout="center" style="--unitone--max-width: 1280px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Center } from '@inc2734/unitone-css';
-
-<Center maxWidth="1280px">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</Center>
-```

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Center } from '../';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/Center',
-  component: Center,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    intrinsic: {
-      control: { type: 'inline-radio' },
-      description: 'Intrinsic centering. Set by `data-unitone-layout` attribute `-intrinsic`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    withText: {
-      control: { type: 'inline-radio' },
-      description: 'Centering with text. Set by `data-unitone-layout` attribute `-with-text`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', 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: {
-    intrinsic: false,
-    withText: false,
-    gutters: undefined,
-    maxWidth: undefined,
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Stack>
-      <Center {...args}>Lorem ipsum dolor sit amet, consectetur adipisicing elit</Center>
-      <Center {...args}>
-        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
-      </Center>
-    </Stack>
-  );
-};

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>
-  );
-};