@inc2734/unitone-css 0.47.2 → 0.48.0

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

@@ -1,73 +0,0 @@
-# Switcher
-
-The direction of content flow switches depending on the content. If the width of the switcher block is smaller than the "threshold", it becomes one column.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="switcher">
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #decc00">Lorem ipsum</div>
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #bfb6a8">dolor sit</div>
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #edede6">amet consectetur</div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Switcher, Decorator } from '@inc2734/unitone-css';
-
-<Switcher>
-  <Decorator backgroundColor="#decc00">Lorem ipsum</Decorator>
-  <Decorator backgroundColor="#bfb6a8">dolor sit</Decorator>
-  <Decorator backgroundColor="#edede6">amet consectetur</Decorator>
-</Switcher>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="switcher -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Switcher } from '@inc2734/unitone-css';
-
-<Switcher gap={1}>
-  ...
-</Switcher>
-```
-
-### Threshold
-
-If the box size is smaller than this value, it switches to one column.
-
-#### HTML
-
-```html
-<div data-unitone-layout="switcher" style="--unitone--thureshold: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Switcher } from '@inc2734/unitone-css';
-
-<Switcher threshold="500px">
-  ...
-</Switcher>
-```

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Switcher } from '../';
-import { Decorator } from '../../decorator';
-
-export default {
-  title: 'Layout Primitives/Switcher',
-  component: Switcher,
-  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 },
-    },
-    threshold: {
-      control: { type: 'text' },
-      description:
-        'If the box size is smaller than this value, it switches to one column. Set by CSS var `--unitone--threshold`.',
-      table: { defaultValue: { summary: 'var(--unitone--measure)' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    threshold: 'var(--unitone--measure)',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Switcher {...args}>
-      <Decorator backgroundColor="#decc00" padding={1}>
-        Lorem ipsum
-      </Decorator>
-      <Decorator backgroundColor="#bfb6a8" padding={1}>
-        dolor sit
-      </Decorator>
-      <Decorator backgroundColor="#edede6" padding={1}>
-        amet consectetur
-      </Decorator>
-    </Switcher>
-  );
-};

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