@inc2734/unitone-css 0.23.0

package/src/layout-primitives/both-sides/_both-sides.scss

@@ -0,0 +1,24 @@
+@mixin abstract-both-sides() {
+  --unitone--gap: var(--unitone--s1);
+  --unitone--align-items: flex-start;
+  --unitone--content-width: fit-content;
+  --unitone--content-max-width: var(--unitone--measure);
+
+  display: flex;
+  gap: var(--unitone--gap);
+  flex-wrap: wrap;
+  align-items: var(--unitone--align-items);
+  justify-content: space-between;
+
+  > * {
+    flex-basis: var(--unitone--content-width);
+    flex-grow: 0;
+    max-width: min(100%, var(--unitone--content-max-width));
+  }
+}
+
+@mixin both-sides() {
+  [data-unitone-layout~="both-sides"] {
+    @include abstract-both-sides();
+  }
+}

package/src/layout-primitives/both-sides/stories/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { BothSides } from '../BothSides';
+
+export default {
+  title: 'Layout Primitives/BothSides',
+  component: BothSides,
+  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--s1)' } },
+      type: { name: 'number', required: false },
+    },
+    alignItems: {
+      control: { type: 'inline-radio' },
+      description: '`--unitone--align-items`',
+      description:
+        'Alignment of the row direction. Set by CSS var `--unitone--align-items` or `data-unitone-layout` attribute `-align-items:x`.',
+      options: ['start', 'center', 'end'],
+      table: { defaultValue: { summary: 'start' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    gap: 1,
+    alignItems: 'start',
+  },
+};
+
+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.';
+
+export const Default = (args) => {
+  return (
+    <BothSides {...args}>
+      <p>{content}</p>
+      <ul>
+        <li>Lorem</li>
+        <li>ipsum</li>
+        <li>dolor</li>
+      </ul>
+    </BothSides>
+  );
+};

package/src/layout-primitives/center/Center.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const Center = ({ withText, style, ...props }) => {
+  style = {
+    ...style,
+  };
+
+  return (
+    <div
+      data-unitone-layout={['center', true === withText ? `-with-text` : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+## Usage
+
+```html
+<div data-unitone-layout="text">
+  <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>
+
+  <div data-unitone-layout="center">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit
+  </div>
+
+  <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>
+```
+
+### Centering with text
+
+```html
+<div data-unitone-layout="center -with-text">
+  ...
+</div>
+```

package/src/layout-primitives/center/_center.scss

@@ -0,0 +1,17 @@
+@mixin abstract-center() {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: auto;
+  margin-left: auto;
+
+  &[data-unitone-layout~="-with-text"] {
+    text-align: center;
+  }
+}
+
+@mixin center() {
+  [data-unitone-layout~="center"] {
+    @include abstract-center();
+  }
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Center } from '../Center';
+import { Stack } from '../../stack/Stack';
+
+export default {
+  title: 'Layout Primitives/Center',
+  component: Center,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    withText: {
+      control: { type: 'inline-radio' },
+      description: 'Centering with text. Set by `data-unitone-layout` attribute `-with-text`.',
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    withText: false,
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Stack>
+      <Center {...args}>Lorem ipsum dolor sit amet, consectetur adipisicing elit</Center>
+      <Center {...args}>
+        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
+      </Center>
+    </Stack>
+  );
+};

package/src/layout-primitives/cluster/Cluster.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Cluster = ({ alignItems, gap, justifyContent, tagName = 'div', style, ...props }) => {
+  const Tag = tagName;
+
+  return (
+    <Tag
+      data-unitone-layout={[
+        'cluster',
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+        'undefined' !== typeof alignItems ? `-align-items:${alignItems}` : undefined,
+        'undefined' !== typeof justifyContent ? `-justify-content:${justifyContent}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </Tag>
+  );
+};

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

@@ -0,0 +1,35 @@
+## Usage
+
+```html
+<ul data-unitone-layout="cluster">
+  <li>Lorem ipsum</li>
+  <li>dolor sit</li>
+  <li>amet consectetur</li>
+  <li>adipisicing elit</li>
+  <li>sed do</li>
+</ul>
+```
+
+### Customizing align
+
+```html
+<ul data-unitone-layout="cluster -align-items:center">
+  ...
+</ul>
+```
+
+### Customizing justify
+
+```html
+<ul data-unitone-layout="cluster -justify-content:space-between">
+  ...
+</ul>
+```
+
+### Customizing gap
+
+```html
+<ul data-unitone-layout="cluster -gap:1">
+  ...
+</ul>
+```

package/src/layout-primitives/cluster/_cluster.scss

@@ -0,0 +1,22 @@
+@mixin abstract-cluster() {
+  --unitone--align-items: flex-start;
+  --unitone--gap: calc(var(--unitone--s1) / 2) var(--unitone--s1);
+  --unitone--justify-content: flex-start;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--unitone--gap);
+  justify-content: var(--unitone--justify-content);
+  align-items: var(--unitone--align-items);
+  list-style: none;
+
+  > * {
+    margin: 0;
+  }
+}
+
+@mixin cluster() {
+  [data-unitone-layout~="cluster"] {
+    @include abstract-cluster();
+  }
+}

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Cluster } from '../Cluster';
+
+export default {
+  title: 'Layout Primitives/Cluster',
+  component: Cluster,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    alignItems: {
+      control: { type: 'inline-radio' },
+      description: '`--unitone--align-items`',
+      description:
+        'Alignment of the row direction. Set by CSS var `--unitone--align-items` or `data-unitone-layout` attribute `-align-items:x`.',
+      options: ['start', 'center', 'end'],
+      table: { defaultValue: { summary: 'start' } },
+      type: { name: 'string', 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--s1)' } },
+      type: { name: 'number', required: false },
+    },
+    justifyContent: {
+      control: { type: 'inline-radio' },
+      description:
+        'Alignment of the column direction. Set by CSS var `--unitone--justify-content` or `data-unitone-layout` attribute `-justify-content:x`.',
+      options: ['start', 'center', 'end', 'space-between'],
+      table: { defaultValue: { summary: 'start' } },
+      type: { name: 'string', required: false },
+    },
+    tagName: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    alignItems: 'start',
+    gap: 1,
+    justifyContent: 'start',
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Cluster tagName="ul" {...args}>
+      <li>Lorem ipsum</li>
+      <li>dolor sit</li>
+      <li>amet consectetur</li>
+      <li>adipisicing elit</li>
+      <li>sed do</li>
+    </Cluster>
+  );
+};
+
+export const ExampleHeader = (args) => {
+  return (
+    <Cluster gap={args.gap} justifyContent="space-between" alignItems="center">
+      <div>LOGO</div>
+      <Cluster tagName="ul" gap={args.gap}>
+        <li>Lorem ipsum</li>
+        <li>dolor sit</li>
+        <li>amet consectetur</li>
+        <li>adipisicing elit</li>
+        <li>sed do</li>
+      </Cluster>
+    </Cluster>
+  );
+};
+ExampleHeader.storyName = 'Example : Header';
+ExampleHeader.argTypes = {
+  justifyContent: { table: { disable: true } },
+  alignItems: { table: { disable: true } },
+};

package/src/layout-primitives/container/Container.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Container = ({ align, gutters, maxWidth, text, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--max-width': !!maxWidth ? maxWidth : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'container',
+        'undefined' !== typeof align ? `-align:${align}` : undefined,
+        'undefined' !== typeof gutters ? `-gutters:${gutters}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,39 @@
+## Usage
+
+```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>
+</div>
+```
+
+### Customizing gutters
+
+```html
+<div data-unitone-layout="container -gutters:1">
+  ...
+</div>
+```
+
+### Alignment
+
+```html
+<div data-unitone-layout="container -align:start">
+  ...
+</div>
+```

package/src/layout-primitives/container/_container.scss

@@ -0,0 +1,18 @@
+@mixin abstract-container() {
+  --unitone--gutters: var(--unitone--rem1);
+  --unitone--max-width: var(--unitone--container-max-width);
+
+  box-sizing: content-box;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--unitone--gutters);
+  padding-left: var(--unitone--gutters);
+  max-width: 100%;
+  width: min(100% - var(--unitone--gutters) * 2, var(--unitone--max-width));
+}
+
+@mixin container() {
+  [data-unitone-layout~="container"] {
+    @include abstract-container();
+  }
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Container } from '../Container';
+import { Text } from '../../text/Text';
+
+export default {
+  title: 'Layout Primitives/Container',
+  component: Container,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    align: {
+      control: { type: 'inline-radio' },
+      description: 'Alignment of the container. Set by `data-unitone-layout` attribute `-align:x`.',
+      options: ['start', 'center', 'end'],
+      table: { defaultValue: { summary: '' } },
+      type: { name: 'string', required: false },
+    },
+    gutters: {
+      control: { type: 'inline-radio' },
+      description:
+        'Gutters. Set by CSS var `--unitone--gutters` or `data-unitone-layout` attribute `-gutters:x`.',
+      options: [0, 1, 2, 3, 4, 5, 6, 7],
+      table: { defaultValue: { summary: 'var(--unitone--rem1)' } },
+      type: { name: 'number', required: false },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+      description: 'Max width. Set by CSS var `--unitone--max-width`.',
+      table: { defaultValue: { summary: '1280px' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    align: '',
+    gutters: 1,
+    maxWidth: '1280px',
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Container {...args}>
+      <Text maxWidth="inherit">
+        <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>
+      </Text>
+    </Container>
+  );
+};

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

@@ -0,0 +1,30 @@
+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 = ({ tagName = 'div', ...props }) => {
+  const Tag = tagName;
+
+  return <Tag data-unitone-layout="cover__content">{props.children}</Tag>;
+};

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

@@ -0,0 +1,54 @@
+## Usage
+
+```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="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>
+    <p>sed do</p>
+  </div>
+</div>
+```
+
+### Bottom
+
+```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_bottom">
+      <div data-unitone-layout="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>
+</div>
+```
+
+### No padding
+
+```html
+<div data-unitone-layout="cover -no-padding">
+  ...
+</div>
+```
+
+### Customizing gap
+
+```html
+<div data-unitone-layout="cover -gap:1">
+  ...
+</div>
+```

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

@@ -0,0 +1,37 @@
+@mixin abstract-cover() {
+  --unitone--gap: var(--unitone--s1);
+  --unitone--min-height: 100vh;
+  --unitone--justify-content: center;
+
+  display: flex;
+  flex-flow: column;
+  gap: var(--unitone--gap);
+  justify-content: var(--unitone--justify-content);
+  min-height: var(--unitone--min-height);
+  padding: var(--unitone--gap);
+  overflow: hidden;
+
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &[data-unitone-layout~="-no-padding"] {
+    padding: 0;
+  }
+}
+
+@mixin abstract-cover__content() {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@mixin cover() {
+  [data-unitone-layout~="cover"] {
+    @include abstract-cover();
+  }
+
+  [data-unitone-layout~="cover__content"] {
+    @include abstract-cover__content();
+  }
+}