From e687adb749834c25c7660b5af6119dfeed6ecc4e Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 18 Jan 2024 13:48:23 +0530 Subject: [PATCH] chore: update useTheme doc --- .../blade/docs/utils/useTheme.stories.mdx | 30 ++++++++++++++----- .../BrandedComponentKitchenSink.tsx | 4 +-- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/blade/docs/utils/useTheme.stories.mdx b/packages/blade/docs/utils/useTheme.stories.mdx index 90296bbdfd4..d71e8d3a802 100644 --- 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 index f7b68f501c9..5bc1bbb4bd0 100644 --- 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)),