# CMS Templates

A package containing templates and components for CMS.

## Installation

```bash
npm install @orangesk/cms-templates
```

## Included Assets

This package includes the following resources:

- **Images** - Graphics and visual assets for components
- **shame.css** - Additional stylesheet for component styling

## Styling

### Color Management

This package uses CSS custom properties (variables) for color management of colors, which are not in design system. So use it instead of hardcoded `backgroundColor` values. This provides better color consistency and maintainability.

**Example:**

```jsx
// Instead of:
style={{ backgroundColor: "#D9DAC6" }}

// Use:
style={{ "--color-background-primary": "#D9DAC6" }}
```

## `data-ods-id`

Page templates use static `data-ods-id` attributes on root content sections.

Purpose:

- They allow an external supplier to compare rendered HTML over time.
- They provide a stable identifier for the same page section even when markup inside the section changes.
- They make it easier to detect whether a section was added, removed, reordered, or edited between template versions.

Rules:

- `data-ods-id` must be static, readable, and unique within the rendered page.
- For shared templates, the final value is built from `odsPrefix`, so B2C/B2B variants can reuse the same structure while keeping different IDs.
- Add `data-ods-id` to the root page section component only.
- Do not duplicate the same logical section ID on nested visual wrappers if the parent section already has its own `data-ods-id`.
- If a section is rendered directly by a root component without an outer `Section` wrapper, add the `data-ods-id` to that root component.

Example:

```jsx
<Section data-ods-id="homepage-b2c__section-03">
  ...
</Section>
```