@inc2734/unitone-css 0.46.4 → 0.47.0

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

@@ -1,28 +1,34 @@
+# 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">
-  <div data-unitone-layout="text" style="--unitone--max-width: 100%">
-    <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>
-  </div>
+  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>
 ```
 
-### Customizing gutters
+### 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">
@@ -30,10 +36,58 @@
 </div>
 ```
 
-### Alignment
+#### 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,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Container } from '../Container';
-import { Text } from '../../text/Text';
+import { Container } from '../';
+import { Text } from '../../text';
 
 export default {
   title: 'Layout Primitives/Container',

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

@@ -1,10 +1,17 @@
+# Cover
+
+This component is designed to cover a large area of the screen.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
   <div data-unitone-layout="cover">
     <p>Lorem ipsum</p>
-    <div data-unitone-layout="cover__center">
+
+    <div data-unitone-layout="cover__content -valign:center">
       <div data-unitone-layout="stack">
         <h1 style="--unitone--font-size: 6">Lorem ipsum dolor sit amet</h1>
         <p>
@@ -13,57 +20,176 @@
         </p>
       </div>
     </div>
+
     <p>sed do</p>
   </div>
 </div>
 ```
 
-### Bottom
+### JSX
 
-```html
-<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
-  <div data-unitone-layout="cover">
+```jsx
+import { Decorator, Cover, CoverContent, Stack } from '@inc2734/unitone-css';
+
+<Decorator backgroundColor="#000" color="#fff" padding={0}>
+  <Cover>
     <p>Lorem ipsum</p>
-    <div data-unitone-layout="cover_bottom">
-      <div data-unitone-layout="stack">
-        <h1 style="--unitone--font-size: 6">Lorem ipsum dolor sit amet</h1>
+
+    <CoverContent valign="center">
+      <Stack>
+        <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
         <p>
           consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </p>
-      </div>
-    </div>
-  </div>
+      </Stack>
+    </CoverContent>
+
+    <p>sed do</p>
+  </Cover>
+</Decorator>
+```
+
+## Props
+
+### Gap
+
+Gap.
+
+Since this is also reflected in the padding, specify 0 for padding if padding is not required.
+
+#### HTML
+
+```html
+<div data-unitone-layout="cover -gap:1">
+  ...
 </div>
 ```
 
-### No padding
+#### JSX
+
+```jsx
+import { Cover } from '@inc2734/unitone-css';
+
+<Cover gap={1}>
+  ...
+</Cover>
+```
+
+### Padding
+
+Padding.
+
+#### HTML
 
 ```html
-<div data-unitone-layout="cover -no-padding">
+<div data-unitone-layout="cover -padding:1">
   ...
 </div>
 ```
 
-### Customizing gap
+#### JSX
+
+```jsx
+import { Cover } from '@inc2734/unitone-css';
+
+<Cover padding={1}>
+  ...
+</Cover>
+```
+
+### Min height
+
+Min height.
+
+#### HTML
 
 ```html
-<div data-unitone-layout="cover -gap:1">
+<div data-unitone-layout="cover" style="--unitone--min-height: 80vh">
   ...
 </div>
 ```
 
-### Customizing position
+#### JSX
+
+```jsx
+import { Cover } from '@inc2734/unitone-css';
+
+<Cover minHeight="80vh">
+  ...
+</Cover>
+```
+
+### Item position
+
+You can specify the position of a child element.
 
-After the `position`, specify the position with `-position:{position}`.
+#### HTML
 
 ```html
 <div data-unitone-layout="cover">
-  <div data-unitone-layout="cover__content -position:sticky">
+  <div data-unitone-layout="cover__content -position:fixed" style="--unitone--top: 0; --unitone--right: 0; --unitone--bottom: 0; --unitone--left: 0; --uitone--z-index: 1">
     ...
   </div>
+
   <div data-unitone-layout="cover__content">
     ...
   </div>
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Cover, CoverContent } from '@inc2734/unitone-css';
+
+<Cover gap={1}>
+  <CoverContent position="fixed" top="0" right="0" bottom="0" left="0" zIndex="1">
+    ...
+  </CoverContent>
+
+  <CoverContent>
+    ...
+  </CoverContent>
+</Cover>
+```
+
+### Item valign
+
+You can specify the vertical position of a child element.
+
+#### HTML
+
+```html
+<div data-unitone-layout="decorator" style="--unitone--background-color: #000; --unitone--color: #fff; --unitone--padding: 0">
+  <div data-unitone-layout="cover">
+    <div data-unitone-layout="cover__content valign:top">
+      Lorem ipsum
+    </div>
+
+    <div data-unitone-layout="cover__content valign:bottom">
+      Lorem ipsum
+    </div>
+  </div>
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Decorator, Cover, CoverContent } from '@inc2734/unitone-css';
+
+<Decorator backgroundColor="#000" color="#fff" padding={0}>
+  <Cover>
+    <CoverContent valign="top">
+      Lorem ipsum
+    </CoverContent>
+
+    <CoverContent valign="bottom">
+      Lorem ipsum
+    </CoverContent>
+
+    <p>sed do</p>
+  </Cover>
+</Decorator>
+```

package/src/layout-primitives/cover/_cover.scss

@@ -2,7 +2,6 @@
   --unitone--gap: var(--unitone--global--gap);
   --unitone--padding: var(--unitone--gap);
   --unitone--min-height: 100vh;
-  --unitone--justify-content: center;
 
   display: flex;
   flex-direction: column;
@@ -15,6 +14,7 @@
     margin-bottom: 0;
   }
 
+  // @deprecated
   &[data-unitone-layout~="-no-padding"] {
     padding: 0;
   }
@@ -36,6 +36,29 @@
   z-index: var(--unitone--z-index);
   margin-top: auto;
   margin-bottom: auto;
+
+  &[data-unitone-layout~="-valign:top"] {
+    margin-top: 0;
+    margin-bottom: auto;
+  }
+
+  &[data-unitone-layout~="-valign:center"] {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &[data-unitone-layout~="-valign:bottom"] {
+    margin-top: auto;
+    margin-bottom: 0;
+  }
+
+  &[data-unitone-layout~="-valign:top"] + &[data-unitone-layout~="-valign:center"] {
+    margin-top: 0;
+  }
+
+  &[data-unitone-layout~="-valign:center"] + &[data-unitone-layout~="-valign:bottom"] {
+    margin-top: 0;
+  }
 }
 
 @mixin cover() {
@@ -45,28 +68,5 @@
 
   [data-unitone-layout~="cover__content"] {
     @include abstract-cover__content();
-
-    &[data-unitone-layout~="-valign:top"] {
-      margin-top: 0;
-      margin-bottom: auto;
-    }
-
-    &[data-unitone-layout~="-valign:center"] {
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-
-    &[data-unitone-layout~="-valign:bottom"] {
-      margin-top: auto;
-      margin-bottom: 0;
-    }
-
-    &[data-unitone-layout~="-valign:top"] + [data-unitone-layout~="cover__content"][data-unitone-layout~="-valign:center"] {
-      margin-top: 0;
-    }
-
-    &[data-unitone-layout~="-valign:center"] + [data-unitone-layout~="cover__content"][data-unitone-layout~="-valign:bottom"] {
-      margin-top: 0;
-    }
   }
 }

package/src/layout-primitives/cover/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export const Cover = ({ gap, minHeight, justifyContent, padding, noPadding, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--min-height': !!minHeight ? minHeight : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'cover',
+        noPadding ? '-no-padding' : undefined,
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+        'undefined' !== typeof padding ? `-padding:${padding}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const CoverContent = ({
+  valign,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  tagName = 'div',
+  style,
+  ...props
+}) => {
+  const Tag = tagName;
+
+  style = {
+    ...style,
+    '--unitone--top': 'undefined' !== typeof top ? top : undefined,
+    '--unitone--right': 'undefined' !== typeof right ? right : undefined,
+    '--unitone--bottom': 'undefined' !== typeof bottom ? bottom : undefined,
+    '--unitone--left': 'undefined' !== typeof left ? left : undefined,
+    '--unitone--z-index': 'undefined' !== typeof zIndex ? zIndex : undefined,
+  };
+
+  return (
+    <Tag
+      data-unitone-layout={[
+        'cover__content',
+        'undefined' !== typeof valign ? `-valign:${valign}` : undefined,
+        'undefined' !== typeof position ? `-position:${position}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </Tag>
+  );
+};

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Cover, CoverContent } from '../Cover';
-import { Decorator } from '../../decorator/Decorator';
-import { Stack } from '../../stack/Stack';
+import { Cover, CoverContent } from '../';
+import { Decorator } from '../../decorator';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/Cover',
@@ -20,24 +20,25 @@ export default {
       table: { defaultValue: { summary: 'var(--unitone--global--gap)' } },
       type: { name: 'number', required: false },
     },
+    padding: {
+      control: { type: 'inline-radio' },
+      description:
+        'Padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
+      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
+      table: { defaultValue: { summary: '0var(--unitone--global--gap)' } },
+      type: { name: 'number', required: false },
+    },
     minHeight: {
       control: { type: 'text' },
       description: 'Min height. Set by CSS var `--unitone--min-height`.',
       table: { defaultValue: { summary: '100vh' } },
       type: { name: 'string', required: false },
     },
-    noPadding: {
-      control: { type: 'inline-radio' },
-      description: 'Remove padding.',
-      options: [false, true],
-      table: { defaultValue: { summary: 'false' } },
-      type: { name: 'boolean', required: false },
-    },
   },
   args: {
     gap: 2,
+    padding: 2,
     minHeight: '100vh',
-    noPadding: false,
   },
 };
 
@@ -65,7 +66,7 @@ export const ExampleHeader = (args) => {
   return (
     <Decorator backgroundColor="#000" color="#fff">
       <Cover {...args}>
-        <CoverContent position="top">
+        <CoverContent valign="top">
           <Stack>
             <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
             <p>
@@ -87,7 +88,7 @@ export const ExampleFooter = (args) => {
   return (
     <Decorator backgroundColor="#000" color="#fff">
       <Cover {...args}>
-        <CoverContent position="bottom">
+        <CoverContent valign="bottom">
           <Stack>
             <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
             <p>
@@ -109,11 +110,11 @@ export const ExampleHeaderFooter = (args) => {
   return (
     <Decorator backgroundColor="#000" color="#fff">
       <Cover {...args}>
-        <CoverContent position="top">
+        <CoverContent valign="top">
           <p>Lorem ipsum</p>
         </CoverContent>
 
-        <CoverContent position="bottom">
+        <CoverContent valign="bottom">
           <p>Lorem ipsum</p>
         </CoverContent>
       </Cover>
@@ -129,11 +130,11 @@ export const ExampleHeaderCenter = (args) => {
   return (
     <Decorator backgroundColor="#000" color="#fff">
       <Cover {...args}>
-        <CoverContent position="top">
+        <CoverContent valign="top">
           <p>Lorem ipsum</p>
         </CoverContent>
 
-        <CoverContent position="center">
+        <CoverContent valign="center">
           <Stack>
             <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
             <p>
@@ -155,7 +156,7 @@ export const ExampleCenterFooter = (args) => {
   return (
     <Decorator backgroundColor="#000" color="#fff">
       <Cover {...args}>
-        <CoverContent position="center">
+        <CoverContent valign="center">
           <Stack>
             <h1 style={{ '--unitone--font-size': 6 }}>Lorem ipsum dolor sit amet</h1>
             <p>
@@ -165,7 +166,7 @@ export const ExampleCenterFooter = (args) => {
           </Stack>
         </CoverContent>
 
-        <CoverContent position="bottom">
+        <CoverContent valign="bottom">
           <p>Lorem ipsum</p>
         </CoverContent>
       </Cover>