# @commercetools-uikit/inset-squish

> An inset squish spacing component provides a consistent padding to the inner component, with horizontal padding being proportionally bigger than the vertical padding.

Latest version **10.39.3** (published 2020-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @commercetools-uikit/inset-squish
pnpm add @commercetools-uikit/inset-squish
yarn add @commercetools-uikit/inset-squish
bun add @commercetools-uikit/inset-squish
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 10.39.3 |
| Published | 2020-11-04 |
| First published | 2020-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 154 |
| Maintainers | tdeekens, commercetools-admin, emmenko |
| Keywords | javascript, design system, react, uikit |

## Links

- npm: https://www.npmjs.com/package/@commercetools-uikit/inset-squish
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/inset-squish

## Dependencies (6)

- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.34
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.12.1
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) 7.12.1
- [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) 10.39.3
- [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) 10.39.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 10.39.3 (latest) — 2020-11-04
- 0.0.0-canary-202010414016 (canary) — 2020-11-04
- 10.39.2 — 2020-11-04
- 0.0.0-canary-202010474929 — 2020-11-04
- 0.0.0-canary-2020103203835 — 2020-11-03
- 0.0.0-canary-2020103182138 — 2020-11-03
- 0.0.0-canary-2020103141922 — 2020-11-03
- 10.39.1 — 2020-11-02
- 0.0.0-canary-202010215528 — 2020-11-02
- 0.0.0-canary-202092995452 — 2020-10-29

## README

# Inset Squish

## Description

If you want to learn more about the spacing components take a look at
[this](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)
article.

## Usage

```jsx
import SpacingsInsetSquish from '@commercetools-uikit/spacings-inset-squish';

// button component that uses SpacingsInsetSquish
<div className={styles.background}>
  <SpacingsInsetSquish scale="m">
    <Text.Detail>{/* SUBMIT */}</Text.Detail>
  </SpacingsInsetSquish>
</div>;
```

### Using Spacings preset

InsetSquish spacing can be imported and used via `spacings` preset as well.

```jsx
import Spacings from '@commercetools-uikit/spacings';

// button component that uses SpacingsInsetSquish
<div className={styles.background}>
  <Spacings.InsetSquish scale="m">
    <Text.Detail>{/* SUBMIT */}</Text.Detail>
  </Spacings.InsetSquish>
</div>;
```

## Properties

| Props      | Type             | Required | Values            | Default |
| ---------- | ---------------- | :------: | ----------------- | ------- |
| `scale`    | `String`         |    -     | `['s', 'm', 'l']` | `m`     |
| `children` | `PropTypes.node` |    -     | -                 | -       |

## Scales

| Scale | Pixel       |
| :---- | :---------- |
| s     | `4` x `8`   |
| m     | `8` x `16`  |
| l     | `16` x `32` |

---
_Source: https://npm.io/package/@commercetools-uikit/inset-squish · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._