@inc2734/unitone-css 0.23.0

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

@@ -0,0 +1,140 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Cover, CoverContent } from '../Cover';
+import { Decorator } from '../../decorator/Decorator';
+import { Stack } from '../../stack/Stack';
+
+export default {
+  title: 'Layout Primitives/Cover',
+  component: Cover,
+  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 },
+    },
+    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 },
+    },
+    justifyContent: {
+      control: { type: 'inline-radio' },
+      description:
+        'Alignment of the row 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 },
+    },
+  },
+  args: {
+    gap: 1,
+    minHeight: '100vh',
+    noPadding: false,
+    justifyContent: 'center',
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Decorator backgroundColor="#000" color="#fff">
+      <Cover {...args}>
+        <p>Lorem ipsum</p>
+        <CoverContent>
+          <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>
+          </Stack>
+        </CoverContent>
+        <p>Lorem ipsum</p>
+      </Cover>
+    </Decorator>
+  );
+};
+
+export const ExampleNoHeader = (args) => {
+  return (
+    <Decorator backgroundColor="#000" color="#fff">
+      <Cover {...args}>
+        <CoverContent>
+          <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>
+          </Stack>
+        </CoverContent>
+        <p>sed do</p>
+      </Cover>
+    </Decorator>
+  );
+};
+ExampleNoHeader.storyName = 'Example : No header';
+ExampleNoHeader.args = {
+  minHeight: '80vh',
+};
+
+export const ExampleNoFooter = (args) => {
+  return (
+    <Decorator backgroundColor="#000" color="#fff">
+      <Cover {...args}>
+        <p>Lorem ipsum</p>
+        <CoverContent>
+          <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>
+          </Stack>
+        </CoverContent>
+      </Cover>
+    </Decorator>
+  );
+};
+ExampleNoFooter.storyName = 'Example : No footer';
+ExampleNoFooter.args = {
+  minHeight: '80vh',
+};
+
+export const ExampleFooter = (args) => {
+  return (
+    <Decorator backgroundColor="#000" color="#fff">
+      <Cover {...args}>
+        <CoverContent>
+          <p>Lorem ipsum</p>
+        </CoverContent>
+        <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>
+        </Stack>
+      </Cover>
+    </Decorator>
+  );
+};
+ExampleFooter.storyName = 'Example : Footer';
+ExampleFooter.args = {
+  minHeight: '80vh',
+};

package/src/layout-primitives/decorator/Decorator.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export const Decorator = ({
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  color,
+  padding,
+  shadow,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  style,
+  ...props
+}) => {
+  style = {
+    ...style,
+    '--unitone--background-color': backgroundColor,
+    '--unitone--border-color': borderColor,
+    '--unitone--border-radius': borderRadius,
+    '--unitone--border-width': borderWidth,
+    '--unitone--color': color,
+    '--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 (
+    <div
+      data-unitone-layout={[
+        'decorator',
+        'undefined' !== typeof padding ? `-padding:${padding}` : undefined,
+        !!shadow ? '-shadow' : undefined,
+        !!position ? `-position:${position}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+## Usage
+
+```html
+<div data-unitone-layout="decorator">
+  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 padding
+
+```html
+<div data-unitone-layout="decorator -padding:1">
+  ...
+</div>
+```
+
+### With shadow
+
+```html
+<div data-unitone-layout="decorator -shadow">
+  ...
+</div>
+```
+
+### Customizing position
+
+After the `position`, specify the position with `-position:{position}`.
+
+```html
+<div data-unitone-layout="decorator -position:relative">
+  ...
+</div>
+```
+
+### Customizing offset
+
+```html
+<div data-unitone-layout="decorator -position:relative" style="--unitone--top: 1px; --unitone--right: 1px; --unitone--bottom: 1px; --unitone--left: 1px">
+  ...
+</div>
+```
+
+### Customizing z-index
+
+```html
+<div data-unitone-layout="decorator -position:relative" style="--unitone--z-index: 1">
+  ...
+</div>
+```

package/src/layout-primitives/decorator/_decorator.scss

@@ -0,0 +1,54 @@
+@mixin abstract-decorator() {
+  --unitone--background-color: transparent;
+  // --unitone--color: var(--unitone--color-text); // Comment out if you don't want it to be inherited.
+  --unitone--border-color: transparent;
+  --unitone--border-width: 0;
+  --unitone--border-radius: 0;
+  --unitone--padding: var(--unitone--s0);
+  --unitone--box-shadow: none;
+  --unitone--position: static;
+  --unitone--top: initial;
+  --unitone--right: initial;
+  --unitone--bottom: initial;
+  --unitone--left: initial;
+  --unitone--z-index: initial;
+
+  padding: calc((var(--unitone--padding) - var(--unitone--half-leading) * 1em)) var(--unitone--padding);
+  border: var(--unitone--border-width) solid var(--unitone--border-color);
+  border-radius: var(--unitone--border-radius);
+  color: var(--unitone--color);
+  background-color: var(--unitone--background-color);
+  box-shadow: var(--unitone--box-shadow);
+  position: var(--unitone--position);
+  top: var(--unitone--top);
+  right: var(--unitone--right);
+  bottom: var(--unitone--bottom);
+  left: var(--unitone--left);
+  z-index: var(--unitone--z-index);
+
+  &[data-unitone-layout~="-shadow"] {
+    --unitone--box-shadow: var(--unitone--shadow);
+  }
+
+  &[data-unitone-layout~="-position\:relative"] {
+    --unitone--position: relative !important;
+  }
+
+  &[data-unitone-layout~="-position\:absolute"] {
+    --unitone--position: absolute !important;
+  }
+
+  &[data-unitone-layout~="-position\:sticky"] {
+    --unitone--position: sticky !important;
+  }
+
+  &[data-unitone-layout~="-position\:fixed"] {
+    --unitone--position: fixed !important;
+  }
+}
+
+@mixin decorator() {
+  [data-unitone-layout~="decorator"] {
+    @include abstract-decorator();
+  }
+}

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Decorator } from '../Decorator';
+import { Stack } from '../../stack/Stack';
+
+export default {
+  title: 'Layout Primitives/Decorator',
+  component: Decorator,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'color' },
+      description: 'Background color. Set by CSS var `--unitone--background-color`.',
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    borderColor: {
+      control: { type: 'color' },
+      description: 'Border color. Set by CSS var `--unitone--border-color`.',
+      table: { defaultValue: { summary: 'transparent' } },
+      type: { name: 'string', required: false },
+    },
+    borderRadius: {
+      control: { type: 'text' },
+      description: 'Border radius. Set by CSS var `--unitone--border-radius`.',
+      table: { defaultValue: { summary: '0' } },
+      type: { name: 'string', required: false },
+    },
+    borderWidth: {
+      control: { type: 'text' },
+      description: 'Border width. Set by CSS var `--unitone--border-width`.',
+      table: { defaultValue: { summary: '0' } },
+      type: { name: 'string', required: false },
+    },
+    color: {
+      control: { type: 'color' },
+      description: 'Text color. Set by CSS var `--unitone--color`.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', 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: 'var(--unitone--s0)' } },
+      type: { name: 'number', required: false },
+    },
+    shadow: {
+      control: { type: 'inline-radio' },
+      description: 'With `box-shadow`.',
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+    position: {
+      control: { type: 'inline-radio' },
+      description: 'The position value.',
+      options: ['static', 'relative', 'absolute', 'sticky', 'fixed'],
+      table: { defaultValue: { summary: 'static' } },
+      type: { name: 'string', required: false },
+    },
+    top: {
+      control: { type: 'text' },
+      description: 'Offset top.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+    right: {
+      control: { type: 'text' },
+      description: 'Offset right.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+    bottom: {
+      control: { type: 'text' },
+      description: 'Offset bottom.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+    left: {
+      control: { type: 'text' },
+      description: 'Offset left.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+    zIndex: {
+      control: { type: 'text' },
+      description: 'z-index.',
+      table: { defaultValue: { summary: 'initial' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    backgroundColor: 'transarent',
+    borderColor: 'transparent',
+    borderRadius: '0px',
+    borderWidth: '0px',
+    color: 'initial',
+    padding: 0,
+    shadow: false,
+    position: 'static',
+    top: 'initial',
+    right: 'initial',
+    bottom: 'initial',
+    left: 'initial',
+    zIndex: 'initial',
+  },
+};
+
+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 (
+    <Decorator {...args}>
+      <p>{content}</p>
+    </Decorator>
+  );
+};
+
+export const ExampleShadow = (args) => {
+  return (
+    <Decorator {...args}>
+      <p>{content}</p>
+    </Decorator>
+  );
+};
+ExampleShadow.storyName = 'Example : Shadow';
+ExampleShadow.argTypes = {
+  shadow: { table: { disable: true } },
+};
+ExampleShadow.args = {
+  padding: 1,
+  shadow: true,
+};
+
+export const ExampleCombobox = (args) => {
+  return (
+    <Decorator borderWidth={args.borderWidth} borderColor={args.backgroundColor}>
+      <Decorator
+        padding={args.padding}
+        backgroundColor={args.backgroundColor}
+        color="var(--unitone--color-white)"
+      >
+        Combo Box
+      </Decorator>
+      <Decorator padding={args.padding}>
+        <p>{content}</p>
+      </Decorator>
+    </Decorator>
+  );
+};
+ExampleCombobox.storyName = 'Example : Combobox';
+ExampleCombobox.argTypes = {
+  color: { table: { disable: true } },
+  borderColor: { table: { disable: true } },
+};
+ExampleCombobox.args = {
+  padding: -1,
+  backgroundColor: '#000',
+  borderWidth: '1px',
+};
+
+export const ExamplePosition = (args) => {
+  return (
+    <Decorator position="relative">
+      <Stack>
+        <Decorator backgroundColor="#000" color="#fff" padding={1}>
+          {content}
+        </Decorator>
+        <Decorator {...args}>{content}</Decorator>
+        <Decorator backgroundColor="#000" color="#fff" padding={1}>
+          {content}
+        </Decorator>
+      </Stack>
+    </Decorator>
+  );
+};
+ExamplePosition.storyName = 'Example : Position';
+ExamplePosition.args = {
+  padding: -1,
+  borderWidth: '1px',
+  backgroundColor: 'rgba(255, 0, 0, .7)',
+  position: 'absolute',
+  top: '100px',
+};

package/src/layout-primitives/float/Float.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Float = ({ gap, minWidth, minMeasure, position, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--min-width': !!minWidth ? minWidth : undefined,
+    '--unitone--min-measure': !!minMeasure ? minMeasure : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'float',
+        !!position ? `-${position}` : undefined,
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+## Usage
+
+```html
+<div data-unitone-layout="float">
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</div>
+<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>
+```
+
+### Float right
+
+```html
+<div data-unitone-layout="float -right">
+  ...
+</div>
+```
+
+### Customizing gap
+
+```html
+<div data-unitone-layout="float -gap:1">
+  ...
+</div>
+```

package/src/layout-primitives/float/_float.scss

@@ -0,0 +1,29 @@
+@mixin abstract-float() {
+  --unitone--gap: var(--unitone--s1);
+  --unitone--min-measure: calc(var(--unitone--measure) / 2);
+  --unitone--min-width: calc(var(--unitone--measure) / 2);
+
+  width: max(
+    min(var(--unitone--min-width), 100%),
+    min((var(--unitone--min-width) + var(--unitone--gap) + var(--unitone--min-measure) - 100%) * 999, 100%)
+  );
+
+  &[data-unitone-layout~="-left"],
+  &:not([data-unitone-layout~="-right"]) {
+    float: left;
+    margin-right: var(--unitone--gap);
+    margin-bottom: var(--unitone--gap);
+  }
+
+  &[data-unitone-layout~="-right"] {
+    float: right;
+    margin-left: var(--unitone--gap);
+    margin-bottom: var(--unitone--gap);
+  }
+}
+
+@mixin float() {
+  [data-unitone-layout~="float"] {
+    @include abstract-float();
+  }
+}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Float } from '../Float';
+
+export default {
+  title: 'Layout Primitives/Float',
+  component: Float,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    gap: {
+      control: { type: 'inline-radio' },
+      description:
+        'Gap between items. 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 },
+    },
+    minMeasure: {
+      control: { type: 'text' },
+      description:
+        'Min size of the item following the floating item. Set by CSS var `--unitone--min-measure`.',
+      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
+      type: { name: 'string', required: false },
+    },
+    minWidth: {
+      control: { type: 'text' },
+      description: 'Min size of the floating item. Set by CSS var `--unitone--min-width`.',
+      table: { defaultValue: { summary: 'calc(var(--unitone--measure) / 2)' } },
+      type: { name: 'string', required: false },
+    },
+    position: {
+      control: { type: 'inline-radio' },
+      description:
+        'The floating item position. Set by `data-unitone-layout` attribute `-right` or `-left`.',
+      options: ['left', 'right'],
+      table: { defaultValue: { summary: 'left' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    gap: 1,
+    minMeasure: 'calc(var(--unitone--measure) / 2)',
+    minWidth: 'calc(var(--unitone--measure) / 2)',
+    position: 'left',
+  },
+};
+
+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 (
+    <>
+      <Float {...args}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+      </Float>
+      <p>{content}</p>
+    </>
+  );
+};
+
+export const ExampleRight = (args) => {
+  return (
+    <>
+      <Float {...args}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+      </Float>
+      <p>{content}</p>
+    </>
+  );
+};
+ExampleRight.storyName = 'Example : Right';
+ExampleRight.args = {
+  position: 'right',
+};

package/src/layout-primitives/frame/Frame.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Frame = ({ ratio, switchRatio, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--ratio': !!ratio ? ratio : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={['frame', true === switchRatio ? `-switch` : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,7 @@
+## Usage
+
+```html
+<div data-unitone-layout="frame">
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+</div>
+```