@inc2734/unitone-css 0.47.3 → 0.48.0

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

@@ -1,139 +0,0 @@
-# Text
-
-Designed to display legible text.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="text">
-  <p>Lorem 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>
-  <p>Lorem 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>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text>
-  <p>Lorem 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>
-  <p>Lorem 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>
-```
-
-## Props
-
-### Apply gap
-
-Automatically apply appropriate gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="text -gap -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text applyGap gap={1}>
-  ...
-</Text>
-```
-
-### Gutters
-
-Gutters.
-
-#### HTML
-
-```html
-<div data-unitone-layout="text -gutters:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text gutters={1}>
-  ...
-</Text>
-```
-
-### Max width
-
-Sets the maximum width of the child element.
-
-#### HTML
-
-```html
-<div data-unitone-layout="text" style="--unitone--max-width: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text maxWidth="500px">
-  ...
-</Text>
-```
-
-### Centering children
-
-Intrinsic centering of child elements.
-
-#### HTML
-
-```html
-<div data-unitone-layout="text -center">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text center>
-  ...
-</Text>
-```
-
-#### Columns
-
-Correctly columnarize the child elements.
-
-`--unitone--max-width` specifies the ideal width of the column.
-
-#### HTML
-
-```html
-<div data-unitone-layout="text -columns" --unitone--max-width="300px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Text } from '@inc2734/unitone-css';
-
-<Text columns maxWidth="300px">
-  ...
-</Text>
-```

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

@@ -1,148 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Text } from '../';
-
-export default {
-  title: 'Layout Primitives/Text',
-  component: Text,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    center: {
-      control: { type: 'inline-radio' },
-      description: 'Centering child elements. Set by `data-unitone-layout` attribute `-center`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    column: {
-      control: { type: 'inline-radio' },
-      description:
-        'Correctly columnarize the child elements. Set by `data-unitone-layout` attribute `-column`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    applyGap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Automatically apply appropriate gap. Set by `data-unitone-layout` attribute `-gap`.',
-      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: 'var(--unitone--global--text-gap)' } },
-      type: { name: 'number', 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: '0' } },
-      type: { name: 'number', required: false },
-    },
-    maxWidth: {
-      control: { type: 'text' },
-      description: 'Max width. Set by CSS var `--unitone--max-width`.',
-      table: { defaultValue: { summary: 'var(--unitone--measure)' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    center: false,
-    column: false,
-    applyGap: false,
-    gap: 1,
-    gutters: 0,
-    maxWidth: 'var(--unitone--measure)',
-  },
-};
-
-const Content = (props) => {
-  const headingText =
-    'ja' === props.lang
-      ? 'あともゴーシュ子たり何に向いていまし'
-      : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
-
-  const bodyText =
-    'ja' === props.lang
-      ? 'あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック'
-      : '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';
-
-  return (
-    <>
-      <h1>{headingText}</h1>
-      <p>{bodyText}</p>
-      <p style={{ '--unitone--font-size': 2 }}>{bodyText}</p>
-      <p>{bodyText}</p>
-      <ul>
-        <li>{bodyText}</li>
-        <li>{bodyText}</li>
-      </ul>
-
-      <h2>{headingText}</h2>
-      <h3>{headingText}</h3>
-      <h4>{headingText}</h4>
-      <h5>{headingText}</h5>
-      <h6>{headingText}</h6>
-      <p>{bodyText}</p>
-
-      <h2>{headingText}</h2>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h3>{headingText}</h3>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h4>{headingText}</h4>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h5>{headingText}</h5>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h6>{headingText}</h6>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-    </>
-  );
-};
-
-export const Default = (args) => {
-  return (
-    <Text {...args}>
-      <Content />
-    </Text>
-  );
-};
-
-export const ExampleCenter = (args) => {
-  return (
-    <Text {...args}>
-      <Content />
-    </Text>
-  );
-};
-ExampleCenter.args = {
-  center: true,
-};
-ExampleCenter.storyName = 'Example : Center';
-
-export const ExampleJa = (args) => {
-  return (
-    <Text {...args} style={{ '--unitone--half-leading': 0.4 }}>
-      <Content lang="ja" />
-    </Text>
-  );
-};
-ExampleJa.storyName = 'Example : Ja';

package/src/layout-primitives/vertical-writing/README.md

@@ -1,133 +0,0 @@
-# Vertical writing
-
-Make the text vertically written.
-
-## Usage
-
-### HTML
-
-```html
-<div>
-  <div data-unitone-layout="vertical-writing">
-    <p>Lorem 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>
-    <p>Lorem 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>
-  </div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { VerticalWriting } from '@inc2734/unitone-css';
-
-<div>
-  <VerticalWriting>
-    <p>Lorem 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>
-    <p>Lorem 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>
-  </VerticalWriting>
-<div>
-```
-
-## Props
-
-### Rows height
-
-Height of each rows.
-
-#### HTML
-
-```html
-<div>
-  <div data-unitone-layout="vertical-writing" style="--unitone--max-height: 20rem">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { VerticalWriting } from '@inc2734/unitone-css';
-
-<div>
-  <VerticalWriting maxHeight="20rem">
-    ...
-  </VerticalWriting>
-<div>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div>
-  <div data-unitone-layout="vertical-writing gap:1">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { VerticalWriting } from '@inc2734/unitone-css';
-
-<div>
-  <VerticalWriting gap={1}>
-    ...
-  </VerticalWriting>
-<div>
-```
-
-### Text orientation
-
-#### HTML
-
-```html
-<div>
-  <div data-unitone-layout="vertical-writing -text-orientation:mixed">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { VerticalWriting } from '@inc2734/unitone-css';
-
-<div>
-  <VerticalWriting textOrientation="mixed">
-    ...
-  </VerticalWriting>
-<div>
-```
-
-### Switch
-
-Switch writing mode when portrait.
-
-#### HTML
-
-```html
-<div>
-  <div data-unitone-layout="vertical-writing -switch">
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { VerticalWriting } from '@inc2734/unitone-css';
-
-<div>
-  <VerticalWriting switch>
-    ...
-  </VerticalWriting>
-<div>
-```

package/src/layout-primitives/vertical-writing/stories/index.stories.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { VerticalWriting } from '../';
-
-export default {
-  title: 'Layout Primitives/VerticalWriting',
-  component: VerticalWriting,
-  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--text-gap)' } },
-      type: { name: 'number', required: false },
-    },
-    maxHeight: {
-      control: { type: 'text' },
-      description: 'Max height of each rows. Set by CSS var `--unitone--max-height`.',
-      table: { defaultValue: { summary: 'calc(9 * var(--unitone--measure) / 16)' } },
-      type: { name: 'string', required: false },
-    },
-    textOrientation: {
-      control: { type: 'inline-radio' },
-      description:
-        'Text orientation. Set by `data-unitone-layout` attribute `-text-orientation:x`.',
-      options: ['mixed', 'upright', 'sideways'],
-      table: { defaultValue: { summary: '' } },
-      type: { name: 'string', required: false },
-    },
-    switchWritingMode: {
-      control: { type: 'inline-radio' },
-      description: 'When the orientation switches, the `writing-mode` also switches.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    gap: 1,
-    maxHeight: 'calc(9 * var(--unitone--measure) / 16)',
-    textOrientation: 'mixed',
-    switchWritingMode: false,
-  },
-};
-
-const Content = (props) => {
-  const headingText = 'あともゴーシュ子たり何に向いていまし';
-
-  const bodyText =
-    'あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック';
-
-  return (
-    <>
-      <h1>{headingText}</h1>
-      <p>{bodyText}</p>
-      <p style={{ '--unitone--font-size': 2 }}>{bodyText}</p>
-      <p>{bodyText}</p>
-      <ul>
-        <li>{bodyText}</li>
-        <li>{bodyText}</li>
-      </ul>
-
-      <h2>{headingText}</h2>
-      <h3>{headingText}</h3>
-      <h4>{headingText}</h4>
-      <h5>{headingText}</h5>
-      <h6>{headingText}</h6>
-      <p>{bodyText}</p>
-
-      <h2>{headingText}</h2>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h3>{headingText}</h3>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h4>{headingText}</h4>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h5>{headingText}</h5>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-
-      <h6>{headingText}</h6>
-      <p>{bodyText}</p>
-      <p>{bodyText}</p>
-    </>
-  );
-};
-
-export const Default = (args) => {
-  return (
-    <VerticalWriting {...args}>
-      <Content />
-    </VerticalWriting>
-  );
-};

package/src/layout-primitives/with-sidebar/README.md

@@ -1,169 +0,0 @@
-# With sidebar
-
-Assemble the component with sidebars. If the configured width can no longer be maintained, a single column display will be used.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="with-sidebar">
-  <p>Lorem ipsum dolor sit amet</p>
-  <ul>
-    <li>Lorem</li>
-    <li>ipsum</li>
-    <li>dolor</li>
-  </ul>
-</div>
-```
-
-### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar>
-  <p>Lorem ipsum dolor sit amet</p>
-  <ul>
-    <li>Lorem</li>
-    <li>ipsum</li>
-    <li>dolor</li>
-  </ul>
-</WithSidebar>
-```
-
-## Props
-
-### Sidebar
-
-Sets sidebar position. Default is `right`.
-
-left / right
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar -sidebar:left">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar sidebar="left">
-  ...
-</WithSidebar>
-```
-
-### Revert
-
-The way child elements are displayed is reversed.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar -revert">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar revert>
-  ...
-</WithSidebar>
-```
-
-### Content min width
-
-Min width of the content.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar" style="--unitone--content-min-width: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar contentMinWidth="500px">
-  ...
-</WithSidebar>
-```
-
-### Sidebar width
-
-Sidebar width.
-
-#### HTML
-
-```html
-<div data-unitone-layout="with-sidebar" style="--unitone--sidebar-width: 300px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar sidebarWidth="300px">
-  ...
-</WithSidebar>
-```
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="with-slider -gap:1">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar gap={1}>
-  ...
-</WithSidebar>
-```
-
-### Align items
-
-Alignment of the row direction.
-
-#### HTML
-
-```html
-<ul data-unitone-layout="with-slider -align-items:center">
-  ...
-</ul>
-```
-
-#### JSX
-
-```jsx
-import { WithSidebar } from '@inc2734/unitone-css';
-
-<WithSidebar alignItems="center">
-  ...
-</WithSidebar>
-```