docs[197]: useResponsiveValue documentation (#3344)

.changeset/tender-eggs-buy.md

@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs[197]: useResponsiveValue documentation

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>
+  );
+};

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>
+```

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: {