@inc2734/unitone-css 0.46.4 → 0.47.0

package/src/layout-primitives/responsive-grid/stories/index.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { ResponsiveGrid } from '../ResponsiveGrid';
-import { Stack } from '../../stack/Stack';
+import { ResponsiveGrid } from '../';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/ResponsiveGrid',
@@ -31,11 +31,19 @@ export default {
       table: { defaultValue: { summary: 'auto-fill' } },
       type: { name: 'string', required: false },
     },
+    divider: {
+      control: { type: 'inline-radio' },
+      description: 'Divider. Set by `data-unitone-layout` attribute `-divider:x`.',
+      options: [undefined, 'stripe', 'underline', 'bordered'],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
   },
   args: {
     columnMinWidth: '240px',
     gap: 2,
     autoRepeat: 'auto-fill',
+    divider: undefined,
   },
 };
 
@@ -44,30 +52,183 @@ const content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
 export const Default = (args) => {
   return (
     <ResponsiveGrid {...args}>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
-      <Stack gap={-2}>
-        <img src="https://placehold.jp/400x300.jpg" alt="" />
-        <p>{content}</p>
-      </Stack>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+    </ResponsiveGrid>
+  );
+};
+
+export const ExampleStripe = (args) => {
+  return (
+    <ResponsiveGrid {...args}>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
     </ResponsiveGrid>
   );
 };
+ExampleStripe.args = {
+  divider: 'stripe',
+};
+ExampleStripe.storyName = 'Example : Stripe';
+
+export const ExampleUnderline = (args) => {
+  return (
+    <ResponsiveGrid {...args}>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+    </ResponsiveGrid>
+  );
+};
+ExampleUnderline.args = {
+  divider: 'underline',
+};
+ExampleUnderline.storyName = 'Example : Underline';
+
+export const ExampleBordered = (args) => {
+  return (
+    <ResponsiveGrid {...args}>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+      <div>
+        <Stack gap={-2}>
+          <img src="https://placehold.jp/400x300.jpg" alt="" />
+          <p>{content}</p>
+        </Stack>
+      </div>
+    </ResponsiveGrid>
+  );
+};
+ExampleBordered.args = {
+  divider: 'bordered',
+};
+ExampleBordered.storyName = 'Example : Bordered';

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

@@ -1,5 +1,11 @@
+# Stack
+
+Arranges child elements vertically at regular intervals.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="stack">
   <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>
@@ -7,7 +13,24 @@
 </div>
 ```
 
-### Customizing gap
+### JSX
+
+```jsx
+import { Stack } from '@inc2734/unitone-css';
+
+<Stack>
+  <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>
+</Stack>
+```
+
+## Props
+
+### Gap
+
+Gap.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="stack -gap:1">
@@ -15,7 +38,21 @@
 </div>
 ```
 
-### Using negative gap
+#### JSX
+
+```jsx
+import { Stack } from '@inc2734/unitone-css';
+
+<Stack gap={1}>
+  ...
+</Stack>
+```
+
+### Negative gap
+
+Add a netative value gap.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="stack -gap:1 -negative">
@@ -23,10 +60,22 @@
 </div>
 ```
 
+#### JSX
+
+```jsx
+import { Stack } from '@inc2734/unitone-css';
+
+<Stack gap={1} negative>
+  ...
+</Stack>
+```
+
 ### Using divider
 
 stripe / underline / bordered
 
+#### HTML
+
 ```html
 <div data-unitone-layout="stack -divider:stripe">
   <div>
@@ -37,3 +86,13 @@ stripe / underline / bordered
   </div>
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Stack } from '@inc2734/unitone-css';
+
+<Stack gap={1} divider="stripe">
+  ...
+</Stack>
+```

package/src/layout-primitives/stack/_stack.scss

@@ -11,6 +11,10 @@
     margin-block-end: 0;
   }
 
+  > li {
+    margin-left: 0;
+  }
+
   &:only-child {
     height: 100%;
   }
@@ -53,6 +57,7 @@
     gap: 0;
 
     > * {
+      position: relative;
       padding-top: var(--unitone--gap);
       padding-bottom: var(--unitone--gap);
 
@@ -74,6 +79,7 @@
     gap: 0;
 
     > * {
+      position: relative;
       padding: var(--unitone--gap);
 
       &::before {
@@ -115,8 +121,4 @@
       max-width: none;
     }
   }
-
-  :where([data-unitone-layout~="stack"] > li) {
-    margin-left: 0;
-  }
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Stack } from '../Stack';
-import { Decorator } from '../../decorator/Decorator';
-import { Cluster } from '../../cluster/Cluster';
+import { Stack } from '../';
+import { Decorator } from '../../decorator';
+import { Cluster } from '../../cluster';
 
 export default {
   title: 'Layout Primitives/Stack',

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

@@ -1,17 +1,73 @@
+# 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="box" style="--unitone--background-color: #decc00">Lorem ipsum</div>
-  <div data-unitone-layout="box" style="--unitone--background-color: #bfb6a8">dolor sit</div>
-  <div data-unitone-layout="box" style="--unitone--background-color: #edede6">amet consectetur</div>
+  <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>
 ```
 
-### Customizing gap
+### 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,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Switcher } from '../Switcher';
-import { Decorator } from '../../decorator/Decorator';
+import { Switcher } from '../';
+import { Decorator } from '../../decorator';
 
 export default {
   title: 'Layout Primitives/Switcher',

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

@@ -1,5 +1,11 @@
+# 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>
@@ -7,18 +13,127 @@
 </div>
 ```
 
-### Automatically apply appropriate gap
+### 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 -gap">
+<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,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Text } from '../Text';
+import { Text } from '../';
 
 export default {
   title: 'Layout Primitives/Text',
@@ -12,14 +12,15 @@ export default {
   argTypes: {
     center: {
       control: { type: 'inline-radio' },
-      description: 'Centering child items. Set by `data-unitone-layout` attribute `-center`.',
+      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: 'Centering child items. Set by `data-unitone-layout` attribute `-center`.',
+      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 },
@@ -40,6 +41,14 @@ export default {
       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`.',
@@ -52,6 +61,7 @@ export default {
     column: false,
     applyGap: false,
     gap: 1,
+    gutters: 0,
     maxWidth: 'var(--unitone--measure)',
   },
 };