chore: update useTheme doc

razorpay · Jan 18, 2024 · e687adb · e687adb
1 parent 9bb3294
commit e687adb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/packages/blade/docs/utils/useTheme.stories.mdx b/packages/blade/docs/utils/useTheme.stories.mdx
@@ -18,12 +18,26 @@ import { Meta } from '@storybook/addon-docs';
 
 The `useTheme` hook returns a `ThemeContext` object that contains the following properties:
 
-| Property         | Type                                                               | Description                                                                                                            |
-| ---------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `theme`          | [`Theme`](#theme)                                                  | The current theme object, which contains the values for various design tokens such as colors, typography, and spacing. |
-| `colorScheme`    | [`ColorScheme`](#colorscheme)                                      | The current color scheme of the application, which can be either 'light' or 'dark'.                                    |
-| `platform`       | [`Platform`](#platform)                                            | The current platform of the application, which can be either 'onDesktop' or 'onMobile'.                                |
-| `setColorScheme` | `(colorScheme: `[`ColorSchemeInput`](#colorschemeinput)`) => void` | A function that allows you to set the color scheme of the application.                                                 |
+```ts
+type ThemeContext = {
+  /**
+   * The current theme object, which contains the values for various design tokens such as colors, typography, and spacing.
+   */
+  theme: Theme;
+  /**
+   * The current color scheme of the application, which can be either 'light' or 'dark'.
+   */
+  colorScheme: ColorSchemeNames;
+  /**
+   * The current platform of the application, which can be either 'onDesktop' or 'onMobile'.
+   */
+  platform: Platform;
+  /**
+   * A function that allows you to set the color scheme of the application.
+   */
+  setColorScheme: (colorScheme: ColorSchemeInput) => void;
+}
+```
 
 ### Usage
 
@@ -78,13 +92,13 @@ To further explore the tokens in Theme, you can navigate to their respective doc
 - [Elevation](?path=/story/tokens-elevation--page)
 - [Typography](?path=/story/tokens-typography--page)
 
-#### `ColorScheme`
+#### `ColorSchemeNames`
 
 The current color scheme of the application. Can be either `'dark'` or `'light'`.
 If color scheme is set to 'system' using `setColorScheme`, the colorScheme property will return `'dark'` or `'light'` based on the user's system preferences.
 
 ```tsx
-type ColorScheme = 'dark' | 'light';
+type ColorSchemeNames = 'dark' | 'light';
 ```
 
 #### `Platform`

diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx
@@ -13,7 +13,7 @@ import * as radioStories from '../../components/Radio/Radio.stories';
 import * as switchStories from '../../components/Switch/Switch.stories';
 import * as textInputStories from '../../components/Input/TextInput/TextInput.stories';
 import * as otpInputStories from '../../components/Input/OTPInput/OTPInput.stories';
-// import * as autoCompleteStories from '../../components/Input/DropdownInputTriggers/AutoComplete.stories';
+import * as autoCompleteStories from '../../components/Input/DropdownInputTriggers/AutoComplete.stories';
 import { Card, CardBody } from '~components/Card';
 import { Box } from '~components/Box';
 import { Heading } from '~components/Typography';
@@ -61,7 +61,7 @@ const allStories = [
   ...Object.values(composeStories(radioStories)),
   ...Object.values(composeStories(switchStories)),
   ...Object.values(composeStories(chipGroupStories)),
-  // ...Object.values(composeStories(autoCompleteStories)),
+  ...Object.values(composeStories(autoCompleteStories)),
   ...Object.values(composeStories(accordionStories)),
   ...Object.values(composeStories(collapsibleStories)),
   ...Object.values(composeStories(modalStories)),