# Glimmer

Glimmer is a foundational component that is used to build Skeleton (*coming
soon*) or other components that invoke loading such as an image waiting to load
on [FormatFile](../FormatFile/FormatFile.md).

## Colors

Glimmers adapts to the background you put it in. If you have a grey background,
the `Glimmer` will automatically darken itself so it's still noticeable.

```tsx
import React from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Text } from "@jobber/components/Text";

export function GlimmerBasicExample() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--background",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--background
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--background--subtle)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--background--subtle
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--reverse)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--reverse (toggle reverseTheme prop)
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
    </div>
  );
}
```

If the Glimmer sits on a `reverse` background (dark in light mode, light in dark
mode), you can toggle the `reverseTheme` prop to switch the colors so it's still
noticeable.

```tsx
import React from "react";
import type { ComponentProps } from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Box } from "@jobber/components/Box";

export function GlimmerReverseThemeExample(
  props: Partial<ComponentProps<typeof Glimmer>>,
) {
  return (
    <Box background="surface--reverse" padding="base">
      <Glimmer reverseTheme {...props} />
    </Box>
  );
}
```

## Semantic blocks

A pre-made block can be used to indicate a certain component.

```tsx
import React from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Tab, Tabs } from "@jobber/components/Tabs";

export function GlimmerSemanticBlocksExample() {
  return (
    <Tabs>
      <Tab label={"Glimmer.Header"}>
        <Glimmer.Header />
      </Tab>
      <Tab label={"Glimmer.Text"}>
        <Glimmer.Text />
      </Tab>
      <Tab label={"Glimmer.Button"}>
        <Glimmer.Button />
      </Tab>
    </Tabs>
  );
}
```


## Props

### Web

#### Glimmer

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `reverseTheme` | `boolean` | No | `false` | Use on surfaces with dark backgrounds. |
| `shape` | `"circle" | "rectangle" | "rectangleShort" | "rectangleShorter" | "square"` | No | `rectangle` | Sets the shape of the glimmer.  If you need a specific width, use the `width` prop. |
| `size` | `"auto" | "base" | "large" | "larger" | "largest" | "small"` | No | `base` | Sets the size of the glimmer.  If you use `"auto"` with a `"rectangle"` shape, it will fill the size of the parents w... |
| `timing` | `"base" | "fast"` | No | `base` | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
| `width` | `number` | No | — | Adjust the width of the glimmer in px values. |

#### Glimmer.Button

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fullWidth` | `boolean` | No | `false` | Allow `Glimmer.Button` to go full width. |
| `reverseTheme` | `boolean` | No | — | Use on surfaces with dark backgrounds. |
| `timing` | `"base" | "fast"` | No | — | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
| `width` | `number` | No | — | Adjust the width of the glimmer in px values. |

#### Glimmer.Header

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `level` | `1 | 2 | 3 | 4 | 5` | No | `3` | Adjust the size of the `Glimmer.Header`. |
| `reverseTheme` | `boolean` | No | — | Use on surfaces with dark backgrounds. |
| `timing` | `"base" | "fast"` | No | — | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
| `width` | `number` | No | — | Adjust the width of the glimmer in px values. |

#### Glimmer.Text

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `lines` | `1 | 2 | 3` | No | `3` | Set how many lines shows up. |
| `reverseTheme` | `boolean` | No | — | Use on surfaces with dark backgrounds. |
| `timing` | `"base" | "fast"` | No | — | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
| `width` | `number` | No | — | Adjust the width of the glimmer in px values. |