<commit_before># Tile

The Tile component renders a themable container that display information related to a single subject or destination

## Getting started

```
yarn add @hig/tile @hig/theme-context @hig/theme-data
```

## Import the component

```
import Tile from '@hig/tile';
```

## Basic usage

```jsx
<Tile />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Surface also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Tile from '@hig/tile';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    surface: {
      ...styles.surface,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <Tile stylesheet={customStylesheet} />
  );
}
```
## Props


### Header Container
Takes a component that will be loaded into container
```
<Component />

- ImageHolder
- Carousel
```

### Background Color
Sets background color for tile
```
omit to have no background

solid/outline/flat???
```

### Divider
```
set color of divider
omit to have no divider
```

### Title
Set title text for tile

### SubTitle
Set subtitle text for tile

### Orientation
vertical/horizontal
```
orientation="vertical"

```


### Version
Optional
Presented as badge
Not interactable
```
version={<Complete16 />}

```

### Identifier Icon
Optional
Identifies the type of item
Not interactable
```
identifier={<Archive16 />}
```

### Status and Action Items
Status icon (optional)

Additional information about item
Not interactable

Action icon (optional)

Any actions associated with item
Interactable
```
const statusAndActionIcons =[{type: 'status', icon: <Alert16 />}, {type: 'status', icon: <Complete16 />}, {type: 'action', icon: <Download16 />, action: () => {console.log('testing download')}}, {type: 'action', icon: <Edit16 />, action: () => {console.log('testing edit')}}];

statusAndActionIcons={statusAndActionIcons}

```

### Notification
Optional
Higher priority, at-a-glance status indicator
Three types:
   -  A: Colored dot
   -  B: Colored circle with logo inside
   -  C: Colored pill (aka extended circle) with short text message inside
Interactability optional
```
const notification = {type: 'pill', component: <Complete16 />};
notification={notification}
```

### Notification Tooltip
Optional
Additional information about notification
Text only
Not interactable
Tooltip is not recommended if the notification itself contains text (type C above)
Use Small tooltip
```
tooltip="click here"

tooltip={<Component />}

```


### Overflow Menu
Optional
In line with first line of primary text
Use vertical “kebab” icon to avoid confusion with ellipsis if primary text is truncated
Interactable (opens flyout menu with additional tile options/actions)
```
overflowMenu={<MoreVertical16 />}
```

### Call to Action (CTA)
Optional
Presented as text link or button
Interactable
```
const cta = {type: 'button', text: 'click here', action: () => {console.log('testing click')}}
cta={cta}
```

### Action Clarifier
Optional
Presented as button on hover to identify what will happen when user clicks
Appears over image area
Button should be accompanied by an overlay on the image (e.g. an opacity of white or black) to improve visibility
```
actionClarifier="click on clarifier";
```

### Checkbox
Optional
```
checkbox={checkbox}
showCheckbox={showCheckbox} - default show or on hover(false)
```

### Pin Icon
Optional
```
pinIcon={pinIcon}
showPin={showPin} - default show or on hover(false)
```<commit_msg>docs: fix readme<commit_after># Tile

The Tile component renders a themable container that display information related to a single subject or destination

## Getting started

```
yarn add @hig/tile @hig/theme-context @hig/theme-data
```

## Import the component

```
import Tile from '@hig/tile';
```

## Basic usage

```jsx
<Tile {...RequiredProps} />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Surface also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Tile from '@hig/tile';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    higTileContainer: {
      ...styles.higTileContainer,
      color: themeData["colorScheme.status.error"],
    },
    higMediaContainer: {
      ...styles.higMediaContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileContentContainer: {
      ...styles.higTileContentContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileTitleContainer: {
      ...styles.higTileTitleContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileTitle: {
      ...styles.higTileTitle,
      color: themeData["colorScheme.status.error"],
    },
    higTileSubTitle: {
      ...styles.higTileSubTitle,
      color: themeData["colorScheme.status.error"],
    },
  });

  return (
    <Tile stylesheet={customStylesheet} />
  );
}
```
{'fraction_non_alphanumeric': 0.12438932732055619, 'fraction_numerical': 0.003006388575723412, 'mean_word_length': 4.142995169082125, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2607742', 'n_tokens_mistral': 1581, 'n_tokens_neox': 1492, 'n_words': 553}