Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(blade): rebranded storybook changes #1982

Merged
merged 8 commits into from
Jan 19, 2024
Merged

chore(blade): rebranded storybook changes #1982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9bb3294
chore: update bottomsheet stories
anuraghazra Jan 18, 2024
e687adb
chore: update useTheme doc
anuraghazra Jan 18, 2024
1c661ac
chore: update component status page
anuraghazra Jan 18, 2024
24bc53f
chore: minor changes
anuraghazra Jan 18, 2024
eca4439
chore: update
anuraghazra Jan 18, 2024
c83ca4a
chore: reexport progressbar & live announcer
anuraghazra Jan 18, 2024
96c6a22
chore: remove rebranded in
anuraghazra Jan 19, 2024
4d46e22
Merge branch 'rebranding/master' into anu/rebrand-story-sanitycheck
anuraghazra Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 3 additions & 39 deletions packages/blade/.storybook/react/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,12 @@ const config: StorybookConfig = {
'@storybook/design-system': { disable: true },
},
stories: [
'../../docs/guides/*.stories.mdx',
'../../src/components/ActionList/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Dropdown/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Box/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Amount/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Badge/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Card/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Icons/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Button/IconButton/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Counter/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Tag/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Indicator/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Button/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Divider/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Chip/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Carousel/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/List/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Link/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Tooltip/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Tabs/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/ProgressBar/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Spinner/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Typography/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Collapsible/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Alert/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Input/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/SpotlightPopoverTour/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/components/Table/**/**/*.stories.@(ts|tsx|js|jsx)',
'../../docs/**/*.stories.mdx',
'../../docs/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/**/*.stories.mdx',
// '../../src/**/*.stories.@(ts|tsx|js|jsx)',
// '../../src/**/*.internal.stories.mdx',
// '../../src/**/*.internal.stories.@(ts|tsx|js|jsx)',
'../../src/**/*.stories.@(ts|tsx|js|jsx)',
'../../src/**/*.internal.stories.mdx',
'../../src/**/*.internal.stories.@(ts|tsx|js|jsx)',
],
addons: [
'@storybook/addon-links',
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/docs/tokens/ThemeExplorer.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Explore Blade's theme tokens.
export const ThemeExplorer = () => {
const { theme } = useTheme();
return (
<Box>
<Box paddingX="spacing.5" paddingY="spacing.2" backgroundColor="surface.background.gray.moderate">
<JSONTree
data={theme}
hideRoot
Expand Down
30 changes: 22 additions & 8 deletions packages/blade/docs/utils/useTheme.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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`
Expand Down
Loading
Loading