@inc2734/unitone-css 0.46.4 → 0.47.0

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

@@ -1,5 +1,11 @@
+# Vertical writing
+
+Make the text vertically written.
+
 ## Usage
 
+### HTML
+
 ```html
 <div>
   <div data-unitone-layout="vertical-writing">
@@ -9,7 +15,26 @@
 </div>
 ```
 
-### Set column height
+### 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>
@@ -19,7 +44,47 @@
 </div>
 ```
 
-### Set text-orientation
+#### 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>
@@ -29,7 +94,23 @@
 </div>
 ```
 
-### Switch writing mode when portrait
+#### JSX
+
+```jsx
+import { VerticalWriting } from '@inc2734/unitone-css';
+
+<div>
+  <VerticalWriting textOrientation="mixed">
+    ...
+  </VerticalWriting>
+<div>
+```
+
+### Switch
+
+Switch writing mode when portrait.
+
+#### HTML
 
 ```html
 <div>
@@ -38,3 +119,15 @@
   </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,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { VerticalWriting } from '../VerticalWriting';
+import { VerticalWriting } from '../';
 
 export default {
   title: 'Layout Primitives/VerticalWriting',
@@ -20,7 +20,7 @@ export default {
     },
     maxHeight: {
       control: { type: 'text' },
-      description: 'Max height of each columns. Set by CSS var `--unitone--max-height`.',
+      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 },
     },

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

@@ -1,8 +1,14 @@
+# 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, 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 ipsum dolor sit amet</p>
   <ul>
     <li>Lorem</li>
     <li>ipsum</li>
@@ -11,7 +17,30 @@
 </div>
 ```
 
-### Left sidebar
+### 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">
@@ -19,18 +48,122 @@
 </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>
 ```
 
-### Customizing align
+#### 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>
+```

package/src/layout-primitives/with-sidebar/stories/index.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { WithSidebar } from '../WithSidebar';
+import { WithSidebar } from '../';
 
 export default {
   title: 'Layout Primitives/WithSidebar',
@@ -66,13 +66,10 @@ export default {
   },
 };
 
-const content =
-  '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';
-
 export const Default = (args) => {
   return (
     <WithSidebar {...args}>
-      <p>{content}</p>
+      <p>Lorem ipsum dolor sit amet</p>
       <ul>
         <li>Lorem</li>
         <li>ipsum</li>
@@ -85,7 +82,7 @@ export const Default = (args) => {
 export const Revert = (args) => {
   return (
     <WithSidebar {...args}>
-      <p>{content}</p>
+      <p>Lorem ipsum dolor sit amet</p>
       <ul>
         <li>Lorem</li>
         <li>ipsum</li>
@@ -116,7 +113,7 @@ export const MediaText = (args) => {
   return (
     <WithSidebar {...args}>
       <img src="https://placehold.jp/400x300.jpg" alt="" />
-      <p>{content}</p>
+      <p>Lorem ipsum dolor sit amet</p>
     </WithSidebar>
   );
 };

package/src/library.js

@@ -0,0 +1,132 @@
+const setFluidFontSizeMagnification = (target) => {
+  const baseFontSize = parseFloat(
+    window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),
+  );
+  const fontSize = parseFloat(window.getComputedStyle(target).getPropertyValue('font-size'));
+  target.style.setProperty('--unitone--fluid-font-size-magnification', fontSize / baseFontSize);
+};
+
+export const fluidFontSizeResizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setFluidFontSizeMagnification(entry.target);
+  }
+});
+
+const setDividerLinewrap = (target) => {
+  const firstChild = [].slice.call(target.children)?.[0];
+  if (!!firstChild) {
+    let prevChild;
+
+    [].slice.call(target.children).forEach((child) => {
+      const baseRect = firstChild.getBoundingClientRect();
+      const prevRect = prevChild?.getBoundingClientRect();
+      const targetRect = child.getBoundingClientRect();
+
+      let layout = (child.getAttribute('data-unitone-layout') || '').split(' ');
+      if (baseRect.top < targetRect.top) {
+        if (!layout.includes('-linewrap')) {
+          layout.push('-linewrap');
+        }
+      } else {
+        layout = layout.filter((value) => value !== '-linewrap');
+      }
+
+      if (firstChild === child || (!!prevRect?.top && prevRect.top < targetRect.top)) {
+        if (!layout.includes('-bol')) {
+          layout.push('-bol');
+        }
+      } else {
+        layout = layout.filter((value) => value !== '-bol');
+      }
+
+      child.setAttribute('data-unitone-layout', layout.join(' '));
+      prevChild = child;
+    });
+  }
+};
+
+export const dividersResizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setDividerLinewrap(entry.target);
+  }
+});
+
+const setColumnCountForVertical = (target) => {
+  target.parentNode.style.height = '';
+  target.parentNode.style.width = '';
+  target.style.columnCount = '';
+
+  let lastChild;
+  [].slice
+    .call(target.children)
+    .reverse()
+    .some((child) => {
+      if (!['absolute', 'fixed'].includes(getComputedStyle(child).position)) {
+        lastChild = child;
+        return true;
+      }
+    });
+
+  if (!lastChild) {
+    return;
+  }
+
+  // For Firefox
+  if (target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left) {
+    target.style.columnCount = 'auto';
+    target.parentNode.style.width = `${Math.ceil(
+      target.getBoundingClientRect().width +
+        target.getBoundingClientRect().left -
+        lastChild.getBoundingClientRect().left,
+    )}px`;
+
+    if (target.getBoundingClientRect().width >= target.parentNode.getBoundingClientRect().width) {
+      target.style.columnCount = '';
+    }
+  }
+
+  // For Safari
+  if (target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left) {
+    target.style.columnCount = 2;
+  }
+
+  const targetY = target.getBoundingClientRect().top + target.getBoundingClientRect().height;
+  const lastChildY =
+    lastChild.getBoundingClientRect().top + lastChild.getBoundingClientRect().height;
+  if (targetY < lastChildY) {
+    target.parentNode.style.height = `${Math.ceil(
+      lastChildY - target.getBoundingClientRect().top,
+    )}px`;
+  }
+};
+
+export const verticalsResizeObserve = (target) => {
+  let prevWidth = 0;
+
+  const mutationObserver = new MutationObserver((entries) => {
+    for (const entry of entries) {
+      setColumnCountForVertical(target);
+    }
+  });
+
+  mutationObserver.observe(target, {
+    // attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  const resizeObserver = new ResizeObserver((entries, observer) => {
+    for (const entry of entries) {
+      const width = entry.borderBoxSize?.[0].blockSize;
+      if (width !== prevWidth) {
+        prevWidth = width;
+        observer.unobserve(entry.target);
+        setColumnCountForVertical(entry.target);
+        observer.observe(entry.target);
+      }
+    }
+  });
+
+  resizeObserver.observe(target);
+};

package/src/patterns/features/features-1/Features1.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Center } from '../../../layout-primitives/center/Center';
-import { Container } from '../../../layout-primitives/container/Container';
-import { ResponsiveGrid } from '../../../layout-primitives/responsive-grid/ResponsiveGrid';
-import { Gutters } from '../../../layout-primitives/gutters/Gutters';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import {
+  Decorator,
+  Center,
+  Container,
+  ResponsiveGrid,
+  Gutters,
+  Stack,
+  Text,
+} from '@inc2734/unitone-css';
 
 export const Feature1 = ({ items = [], ...props }) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/features/features-2/Features2.jsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Frame } from '../../../layout-primitives/frame/Frame';
-import { Layers } from '../../../layout-primitives/layers/Layers';
-import { ResponsiveGrid } from '../../../layout-primitives/responsive-grid/ResponsiveGrid';
-import { Gutters } from '../../../layout-primitives/gutters/Gutters';
+import { Decorator, Container, Frame, Layers, ResponsiveGrid, Gutters } from '@inc2734/unitone-css';
 
 export const Feature2 = ({ items = [], ...props }) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-1/Header1.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Center } from '../../../layout-primitives/center/Center';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Layers } from '../../../layout-primitives/layers/Layers';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import {
+  Decorator,
+  Center,
+  Container,
+  Cover,
+  CoverContent,
+  Layers,
+  Stack,
+  Text,
+} from '@inc2734/unitone-css';
 
 export const Header1 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-2/Header2.jsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Center } from '../../../layout-primitives/center/Center';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Gutters } from '../../../layout-primitives/gutters/Gutters';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import { Decorator, Center, Container, Gutters, Stack, Text } from '@inc2734/unitone-css';
 
 export const Header2 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-3/Header3.jsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Center } from '../../../layout-primitives/center/Center';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Gutters } from '../../../layout-primitives/gutters/Gutters';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import { Decorator, Center, Container, Gutters, Stack, Text } from '@inc2734/unitone-css';
 
 export const Header3 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-4/Header4.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Layers } from '../../../layout-primitives/layers/Layers';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import {
+  Decorator,
+  Container,
+  Cover,
+  CoverContent,
+  Layers,
+  Stack,
+  Text,
+} from '@inc2734/unitone-css';
 
 export const Header4 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-5/Header5.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Layers } from '../../../layout-primitives/layers/Layers';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import {
+  Decorator,
+  Container,
+  Cover,
+  CoverContent,
+  Layers,
+  Stack,
+  Text,
+} from '@inc2734/unitone-css';
 
 export const Header5 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/header/header-6/Header6.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Center } from '../../../layout-primitives/center/Center';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Layers } from '../../../layout-primitives/layers/Layers';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
+import {
+  Decorator,
+  Center,
+  Container,
+  Cover,
+  CoverContent,
+  Layers,
+  Stack,
+  Text,
+} from '@inc2734/unitone-css';
 
 export const Header6 = (props) => (
   <Decorator backgroundColor={props.backgroundColor} color={props.color}>

package/src/patterns/media-text/media-text-1/MediaText1.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { Text } from '../../../layout-primitives/text/Text';
-import { WithSidebar } from '../../../layout-primitives/with-sidebar/WithSidebar';
+import {
+  Decorator,
+  Container,
+  Cover,
+  CoverContent,
+  Stack,
+  Text,
+  WithSidebar,
+} from '@inc2734/unitone-css';
 
 export const MediaText1 = (props) => (
   <Decorator color={props.color}>

package/src/patterns/media-text/media-text-2/MediaText2.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
-import { Decorator } from '../../../layout-primitives/decorator/Decorator';
-import { Container } from '../../../layout-primitives/container/Container';
-import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
-import { Stack } from '../../../layout-primitives/stack/Stack';
-import { WithSidebar } from '../../../layout-primitives/with-sidebar/WithSidebar';
+import {
+  Decorator,
+  Container,
+  Cover,
+  CoverContent,
+  Stack,
+  WithSidebar,
+} from '@inc2734/unitone-css';
 
 export const MediaText2 = (props) => (
   <Decorator color={props.color}>