surface

import { Surface } from "woly";

Surface is a simple layer that contains information. Surface can be used inside Popover or Sidebar component.

Example

Simple text inside Surface.

Surface content

<Playground>
  <Surface priority="primary" weight="fill">
    <Content>
      <Text type="XS">Surface content</Text>
    </Content>
  </Surface>
</Playground>

Sign in form

Sign in form based on Surface.

<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <block.L style={{ width: '300px', padding: '350px 0' }}>
        <Popover
          isOpen={false}
          content={
            <Surface priority="primary">
              <FormBlock>
                <Label priority="primary">Name</Label>
                <Input
                  name="name"
                  onChange={() => console.info('On input change')}
                  placeholder="Ivan Ivanov"
                  type="text"
                  priority="primary"
                />
                <Label priority="primary">Password</Label>
                <Input
                  name="password"
                  onChange={() => console.info('On input change')}
                  type="password"
                  priority="primary"
                />
                <Button
                  style={{ marginTop: '20px' }}
                  onClick={() => {}}
                  text="Submit"
                  type="submit"
                  priority="primary"
                />
              </FormBlock>
            </Surface>
          }
        >
          <Button onClick={change} text="Sign in" priority="primary" />
        </Popover>
      </block.L>
    )}
  </State>
</Playground>

Aside menu

Aside menu based on Surface.

<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <block style={{ position: 'relative', width: '400px', padding: '0 0 350px 0' }}>
        <ButtonIcon
          onClick={change}
          priority="default"
          weight="transparent"
          style={{
            position: 'absolute',
            left: value ? '250px' : '60px',
            zIndex: 2,
            transition: '1s',
          }}
          icon={value ? <IconClose /> : <Threebars />}
        />
        <Aside style={{ width: value ? '250px' : '40px', paddingLeft: value ? '10px' : '60px' }}>
          <Surface priority="primary" weight="ghost">
            <ListContainer
              style={{ paddingLeft: '30px', paddingTop: '70px' }}
              priority="primary"
              as="ul"
            >
              {links.map(({ id, content }) => (
                <ListItem
                  key={id}
                  as="a"
                  href={`#${id}`}
                  onClick={() => {
                    console.log(id);
                  }}
                  text={content}
                />
              ))}
            </ListContainer>
          </Surface>
        </Aside>
      </block>
    )}
  </State>
</Playground>

Kinds

NameDescription
SurfaceBase surface

Props

NameTypeDefaultDescription
childrenReact.ReactNodePass any content as a children property within Surface component.
prioritystring'secondary'Priority prop to style Surface component
weightstringghostSet surface`s weight (ex.: fill, ghost)