From 6f4953b1cccc11fd9a20853c030535e083123c3a Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:28:28 +0200
Subject: [PATCH] docs[197]: useResponsiveValue documentation (#3344)

---
 .changeset/tender-eggs-buy.md                 |  5 ++
 .../tailwind-screen-size-with-hook.demo.tsx   | 13 +++++
 .../useResponsiveValue/useResponsiveValue.mdx | 49 +++++++++++++++++++
 docs/theme/components/Badge.styles.ts         |  2 +-
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tender-eggs-buy.md
 create mode 100644 docs/content/hooks-and-utils/useResponsiveValue/tailwind-screen-size-with-hook.demo.tsx
 create mode 100644 docs/content/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx

diff --git a/.changeset/tender-eggs-buy.md b/.changeset/tender-eggs-buy.md
new file mode 100644
index 0000000000..73b9a7d69e
--- /dev/null
+++ b/.changeset/tender-eggs-buy.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs[197]: useResponsiveValue documentation
diff --git a/docs/content/hooks-and-utils/useResponsiveValue/tailwind-screen-size-with-hook.demo.tsx b/docs/content/hooks-and-utils/useResponsiveValue/tailwind-screen-size-with-hook.demo.tsx
new file mode 100644
index 0000000000..d64627c490
--- /dev/null
+++ b/docs/content/hooks-and-utils/useResponsiveValue/tailwind-screen-size-with-hook.demo.tsx
@@ -0,0 +1,13 @@
+import { useResponsiveValue } from '@marigold/system';
+
+export default () => {
+  const value = useResponsiveValue(
+    ['no breakpoint', 'sm', 'md', 'lg', 'xl', '2xl'],
+    2
+  );
+  return (
+    <div className="sm:bg-lime-600 md:bg-lime-500 lg:bg-lime-400 xl:bg-lime-300 2xl:bg-lime-200">
+      {value}
+    </div>
+  );
+};
diff --git a/docs/content/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx b/docs/content/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx
new file mode 100644
index 0000000000..5a82905ef1
--- /dev/null
+++ b/docs/content/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx
@@ -0,0 +1,49 @@
+---
+title: useResponsiveValue
+caption: Hook that returns values based on screen sizes.
+badge: updated
+---
+
+The `useResponsiveValue` is a client side hook. It can be used to return values based on the current screen size, using breakpoints from the theme `theme.screens`.
+
+To add breakpoints to your theme you have to write them as an array.
+You can pass the following parameters to your useResponsiveValue hook:
+
+The first parameter of the hook will be the values as array which defines the breakpoints. The second argument must be the `defaultIndex` which points opn the default value.
+
+If you want to have a look on all possible breakpoints from the theme you can have a look [here](../introduction/design-tokens#breakpoints).
+
+Also with Tailwind some new class names came along which you can use to add styles by using the responsive modifiers (like: sm:text-sm).
+
+## Usage
+
+### Import
+
+To import the hook you just have to use this code below.
+
+```tsx
+import { useResponsiveValue } from '@marigold/system';
+```
+
+## Examples
+
+With the use of Tailwind CSS, some classes came along with which makes it easy to use different styles on different screen sizes. Here you can see a combination of the `useResponsiveValue` hook and the Tailwind screen sizes.
+
+For example if you want to change `background-color` for different screen sizes you have to use this code below.
+You can see that according to the screen size the text value will change. You can try out yourself and resize the screen.
+
+<ComponentDemo file="./tailwind-screen-size-with-hook.demo.tsx" />
+
+### useSmallScreen
+
+We also have a function that checks if the window is on a small screen size. This can be used if you just want to change something just on small screen size.
+
+The example code shows that when it is a small screen the display css value will change.
+
+```tsx
+import { useSmallScreen } from '@marigold/system';
+
+const isSmallScreen = useSmallScreen();
+...
+<div className={cn(isSmallScreen ? 'hidden' : 'block')}>random div</div>
+```
diff --git a/docs/theme/components/Badge.styles.ts b/docs/theme/components/Badge.styles.ts
index 9744cd43a3..4e667637e7 100644
--- a/docs/theme/components/Badge.styles.ts
+++ b/docs/theme/components/Badge.styles.ts
@@ -1,7 +1,7 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Badge: ThemeComponent<'Badge'> = cva(
-  'inline-flex items-center whitespace-nowrap rounded-[20px] px-2 py-[2px]',
+  'inline-flex items-center truncate rounded-[20px] px-2 py-[2px]',
   {
     variants: {
       variant: {