@inc2734/unitone-css 0.23.0

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Stack } from '../Stack';
+import { Decorator } from '../../decorator/Decorator';
+import { Cluster } from '../../cluster/Cluster';
+
+export default {
+  title: 'Layout Primitives/Stack',
+  component: Stack,
+  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 },
+    },
+    negative: {
+      control: { type: 'inline-radio' },
+      description: 'Using negative gap. Set by `data-unitone-layout` attribute `-negative`.',
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    gap: 1,
+    negative: false,
+  },
+};
+
+const Content = (props) => {
+  const content =
+    'ja' === props.lang
+      ? 'あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック'
+      : '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';
+
+  return (
+    <>
+      <p style={{ '--unitone--font-size': -2 }}>{content}</p>
+      <p style={{ '--unitone--font-size': -1 }}>{content}</p>
+      <p>{content}</p>
+      <p style={{ '--unitone--font-size': 1 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 2 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 3 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 4 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 5 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 6 }}>{content}</p>
+      <p style={{ '--unitone--font-size': 7 }}>{content}</p>
+    </>
+  );
+};
+
+export const Default = (args) => {
+  return (
+    <Stack {...args}>
+      <Content />
+    </Stack>
+  );
+};
+
+export const ExampleJa = (args) => {
+  return (
+    <Stack {...args}>
+      <Content lang="ja" />
+    </Stack>
+  );
+};
+ExampleJa.storyName = 'Example : Ja';
+
+export const ExampleCard = (args) => {
+  return (
+    <div style={{ maxWidth: '480px' }}>
+      <Decorator
+        backgroundColor={args.backgroundColor}
+        color={args.color}
+        padding="1"
+        borderRadius="4px"
+      >
+        <Stack gap={args.gap}>
+          <Decorator>
+            <Cluster>
+              <img
+                src="https://ja.gravatar.com/userimage/18715762/ad5c138cf1d8f3ce1bda5218f26b9b4e.jpeg"
+                alt=""
+                style={{ width: '48px', height: '48px' }}
+              />
+              <Stack gap="0">
+                <div>
+                  <b>Takashi Kitajima</b>
+                </div>
+                <div style={{ '--unitone--font-size': -1 }}>Takashi Kitajima</div>
+              </Stack>
+            </Cluster>
+          </Decorator>
+          <div>
+            <Stack style={{ '--unitone--font-size': -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>
+            </Stack>
+          </div>
+        </Stack>
+      </Decorator>
+    </div>
+  );
+};
+ExampleCard.args = {
+  color: '#f0f2f6',
+  backgroundColor: '#1e293a',
+};
+ExampleCard.storyName = 'Example : Card';
+ExampleCard.argTypes = {
+  center: { table: { disable: true } },
+};

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

@@ -0,0 +1,17 @@
+## Usage
+
+```html
+<div data-unitone-layout="switcher">
+  <div data-unitone-layout="box" style="--unitone--background-color: #decc00">Lorem ipsum</div>
+  <div data-unitone-layout="box" style="--unitone--background-color: #bfb6a8">dolor sit</div>
+  <div data-unitone-layout="box" style="--unitone--background-color: #edede6">amet consectetur</div>
+</div>
+```
+
+### Customizing gap
+
+```html
+<div data-unitone-layout="switcher -gap:1">
+  ...
+</div>
+```

package/src/layout-primitives/switcher/Switcher.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Switcher = ({ gap, limit, threshold, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--threshold': !!threshold ? threshold : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={['switcher', 'undefined' !== typeof gap ? `-gap:${gap}` : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/switcher/_switcher.scss

@@ -0,0 +1,19 @@
+@mixin abstract-switcher() {
+  --unitone--gap: var(--unitone--s1);
+  --unitone--threshold: var(--unitone--measure);
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--unitone--gap);
+
+  > * {
+    flex-grow: 1;
+    flex-basis: calc((var(--unitone--threshold) - 100%) * 999);
+  }
+}
+
+@mixin switcher() {
+  [data-unitone-layout~="switcher"] {
+    @include abstract-switcher();
+  }
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Switcher } from '../Switcher';
+import { Decorator } from '../../decorator/Decorator';
+
+export default {
+  title: 'Layout Primitives/Switcher',
+  component: Switcher,
+  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 },
+    },
+    threshold: {
+      control: { type: 'text' },
+      description:
+        'If the box size is smaller than this value, it switches to one column. Set by CSS var `--unitone--threshold`.',
+      table: { defaultValue: { summary: 'var(--unitone--measure)' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    gap: 1,
+    threshold: 'var(--unitone--measure)',
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Switcher {...args}>
+      <Decorator backgroundColor="#decc00" padding={1}>
+        Lorem ipsum
+      </Decorator>
+      <Decorator backgroundColor="#bfb6a8" padding={1}>
+        dolor sit
+      </Decorator>
+      <Decorator backgroundColor="#edede6" padding={1}>
+        amet consectetur
+      </Decorator>
+    </Switcher>
+  );
+};

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

@@ -0,0 +1,16 @@
+## Usage
+
+```html
+<div data-unitone-layout="text">
+  <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>
+</div>
+```
+
+### Centering children
+
+```html
+<div data-unitone-layout="text -center">
+  ...
+</div>
+```

package/src/layout-primitives/text/Text.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Text = ({ center, maxWidth, scale, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--max-width': !!maxWidth ? maxWidth : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={['text', true === center ? '-center' : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/text/_text.scss

@@ -0,0 +1,80 @@
+@mixin abstract-text() {
+  --unitone--max-width: var(--unitone--measure);
+
+  > * {
+    --unitone--gap: var(--unitone--s1);
+    margin: 0 auto;
+  }
+
+  > *:not(:first-child) {
+    margin-top: calc(var(--unitone--margin-top, 1) * var(--unitone--gap));
+  }
+
+  > *:not(:last-child) {
+    margin-bottom: calc(var(--unitone--margin-bottom, 1) * var(--unitone--gap));
+  }
+
+  > h1 {
+    --unitone--font-size: 4;
+  }
+
+  > :where(h2, h3, h4, h5, h6) {
+    --unitone--margin-bottom: 0;
+
+    & + :where(h2, h3, h4, h5, h6) {
+      --unitone--margin-top: .5;
+    }
+  }
+
+  > h2 {
+    --unitone--font-size: 3;
+  }
+
+  > h3 {
+    --unitone--font-size: 2;
+  }
+
+  > h4 {
+    --unitone--font-size: 1;
+  }
+
+  > h5 {
+    --unitone--font-size: 0;
+
+    & + * {
+      --unitone--margin-top: .5;
+    }
+  }
+
+  > h6 {
+    --unitone--font-size: 0;
+
+    & + * {
+      --unitone--margin-top: .5;
+    }
+  }
+}
+
+@mixin text() {
+  [data-unitone-layout~="text"] {
+    @include abstract-text();
+  }
+
+  :where([data-unitone-layout~="text"] > *) {
+    max-width: min(100%, var(--unitone--max-width));
+  }
+
+  :where([data-unitone-layout~="text"][data-unitone-layout~="-center"]) > * {
+    width: fit-content;
+  }
+
+  [data-unitone-layout~="text"]:lang(ja) {
+    font-feature-settings: "palt" 0;
+    font-kerning: none;
+
+    > :where(h1, h2, h3, h4, h5) {
+      font-feature-settings: "palt" 1;
+      font-kerning: normal;
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Text } from '../Text';
+
+export default {
+  title: 'Layout Primitives/Text',
+  component: Text,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    center: {
+      control: { type: 'inline-radio' },
+      description: 'Centering child items. Set by `data-unitone-layout` attribute `-center`.',
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+      description: 'Max width. Set by CSS var `--unitone--max-width`.',
+      table: { defaultValue: { summary: 'var(--unitone--measure)' } },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    center: false,
+    maxWidth: 'var(--unitone--measure)',
+  },
+};
+
+const Content = (props) => {
+  const headingText =
+    'ja' === props.lang
+      ? 'あともゴーシュ子たり何に向いていまし'
+      : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
+
+  const bodyText =
+    'ja' === props.lang
+      ? 'あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック'
+      : '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';
+
+  return (
+    <>
+      <h1>{headingText}</h1>
+      <p>{bodyText}</p>
+      <p style={{ '--unitone--font-size': 2 }}>{bodyText}</p>
+      <p>{bodyText}</p>
+      <ul>
+        <li>{bodyText}</li>
+        <li>{bodyText}</li>
+      </ul>
+
+      <h2>{headingText}</h2>
+      <h3>{headingText}</h3>
+      <h4>{headingText}</h4>
+      <h5>{headingText}</h5>
+      <h6>{headingText}</h6>
+      <p>{bodyText}</p>
+
+      <h2>{headingText}</h2>
+      <p>{bodyText}</p>
+      <p>{bodyText}</p>
+
+      <h3>{headingText}</h3>
+      <p>{bodyText}</p>
+      <p>{bodyText}</p>
+
+      <h4>{headingText}</h4>
+      <p>{bodyText}</p>
+      <p>{bodyText}</p>
+
+      <h5>{headingText}</h5>
+      <p>{bodyText}</p>
+      <p>{bodyText}</p>
+
+      <h6>{headingText}</h6>
+      <p>{bodyText}</p>
+      <p>{bodyText}</p>
+    </>
+  );
+};
+
+export const Default = (args) => {
+  return (
+    <Text {...args}>
+      <Content />
+    </Text>
+  );
+};
+
+export const ExampleCenter = (args) => {
+  return (
+    <Text {...args}>
+      <Content />
+    </Text>
+  );
+};
+ExampleCenter.args = {
+  center: true,
+};
+ExampleCenter.storyName = 'Example : Center';
+
+export const ExampleJa = (args) => {
+  return (
+    <Text {...args} style={{ '--unitone--half-leading': 0.4 }}>
+      <Content lang="ja" />
+    </Text>
+  );
+};
+ExampleJa.storyName = 'Example : Ja';

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

@@ -0,0 +1,36 @@
+## Usage
+
+```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>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</div>
+```
+
+### Left sidebar
+
+```html
+<div data-unitone-layout="with-sidebar -sidebar:left">
+  ...
+</div>
+```
+
+### Revert
+
+```html
+<div data-unitone-layout="with-sidebar -revert">
+  ...
+</div>
+```
+
+### Customizing align
+
+```html
+<ul data-unitone-layout="with-slider -align-items:center">
+  ...
+</ul>
+```

package/src/layout-primitives/with-sidebar/WithSidebar.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export const WithSidebar = ({
+  gap,
+  contentMinWidth,
+  revert,
+  sidebar,
+  sidebarWidth,
+  alignItems,
+  style,
+  ...props
+}) => {
+  style = {
+    ...style,
+    '--unitone--sidebar-width': !!sidebarWidth ? sidebarWidth : undefined,
+    '--unitone--content-min-width': !!contentMinWidth ? contentMinWidth : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'with-sidebar',
+        true === revert ? '-revert' : undefined,
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+        'undefined' !== typeof sidebar ? `-sidebar:${sidebar}` : undefined,
+        'undefined' !== typeof alignItems ? `-align-items:${alignItems}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/with-sidebar/_with-sidebar.scss

@@ -0,0 +1,58 @@
+@mixin _aside() {
+  flex-basis: var(--unitone--sidebar-width);
+  flex-grow: 1;
+  min-width: 1rem;
+}
+
+@mixin _main() {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: min(100%, var(--unitone--content-min-width));
+  max-width: min(100%, var(--unitone--content-max-width));
+}
+
+@mixin abstract-with-sidebar() {
+  --unitone--content-min-width: 50%;
+  --unitone--content-max-width: 100%;
+  --unitone--gap: var(--unitone--s1);
+  --unitone--align-items: flex-start;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--unitone--gap);
+  align-items: var(--unitone--align-items);
+
+  &:not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:right"],
+  &:not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar\:left"]),
+  &[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:left"] {
+    > :first-child {
+      @include _main();
+    }
+
+    > :last-child {
+      @include _aside();
+    }
+  }
+
+  &:not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:left"],
+  &[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:right"],
+  &[data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar\:left"]) {
+    > :first-child {
+      @include _aside();
+    }
+
+    > :last-child {
+      @include _main();
+    }
+  }
+
+  &[data-unitone-layout~="-revert"] {
+    flex-direction: row-reverse;
+  }
+}
+
+@mixin with-sidebar() {
+  [data-unitone-layout~="with-sidebar"] {
+    @include abstract-with-sidebar();
+  }
+}