@inc2734/unitone-css 0.46.5 → 0.47.0

package/src/stories/2.get-started.stories.mdx

@@ -10,14 +10,40 @@ import { Meta } from '@storybook/addon-docs';
 $ npm install --save-dev @inc2734/unitone-css
 ```
 
-### Using Sass
+### Import CSS
+
+#### Using Sass
 
 ```scss
 @use 'PATH/TO/node_modules/@inc2734/unitone-css/src/app';
 ```
 
-### Using CSS
+#### Using CSS
 
 ```html
 <link rel="stylesheet" href="/node_modules/@inc2734/unitone-css/dist/app.css" />
 ```
+
+### Import js
+
+#### Using import
+
+```js
+import '@inc2734/unitone-css/app';
+```
+
+#### Using script
+
+```html
+<script src="/node_modules/@inc2734/unitone-css/dist/app.js"></script>
+```
+
+## Using React components
+
+```jsx
+import { Decorator } from '@inc2734/unitone-css';
+
+<Decorator padding={ 1 }>
+  <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>
+</Decorator>
+```

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

@@ -1,41 +0,0 @@
-import React from 'react';
-
-export const Cover = ({ gap, minHeight, justifyContent, 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 justifyContent ? `-justify-content:${justifyContent}` : undefined,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export const CoverContent = ({ position, tagName = 'div', ...props }) => {
-  const Tag = tagName;
-
-  return (
-    <Tag
-      data-unitone-layout={[
-        'cover__content',
-        'undefined' !== typeof position ? `-valign:${position}` : undefined,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {props.children}
-    </Tag>
-  );
-};