import { Meta } from "@storybook/blocks";
import { ComponentNameDecorator } from "../../components";
import CornersSettings from "./corners-settings/corner-settings";
import RoundedCorner from "./rounded-corner/rounded-corner";
import { COLORS, SPACING, TYPOGRAPHY } from "../../components/related-components/component-description-map";
import styles from "./round-corners.stories.module.scss";

<Meta title="Foundations/Round Corners" />

<ComponentNameDecorator withFoundationBackground>RoundCorners</ComponentNameDecorator>

- [Overview](#overview)
- [Up next](#up-next)
- [Feedback](#feedback)

## Overview

Our design system contains various fixed units for radius of elements corners.

<div className={styles["rounded-corners-container"]}>
  <CornersSettings title="Small" bullets={["Forms", "Buttons", "Check boxes", "Selected mark", "Tooltips etc..."]}>
    <RoundedCorner roundedCornerSize="small" number="4" />
  </CornersSettings>
  <CornersSettings title="Medium" bullets={["Dropdown", "Popovers", "Attention box", "Updates"]}>
    <RoundedCorner roundedCornerSize="medium" number="8" />
  </CornersSettings>
  <CornersSettings title="Large" bullets={["Popups"]}>
    <RoundedCorner roundedCornerSize="big" number="16" />
  </CornersSettings>
</div>

## Up next

<RelatedComponents componentsNames={[TYPOGRAPHY, SPACING, COLORS]} />