diff --git a/CHANGELOG.md b/CHANGELOG.md index 6aa8ae1..662384f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.8.0] + +### Added + +- Added chart to `SummaryCard` component. +- Added `Statistic` component. +- Added `Grid.useBreakpoint()` hooks. +- Added `sidebarMode` for sidebarProps for `DashboardTemplate`. +- Support responsive for `DashboardTemplate`. +- Added `LineChart` component. + ## [1.7.0] ### Added diff --git a/package.json b/package.json index 427e31d..bfcb606 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.7.1", + "version": "1.8.0", "description": "A simple React UI library", "main": "dist/index.js", "module": "dist/index.js", diff --git a/src/molecules/Grid/Grid.tsx b/src/molecules/Grid/Grid.tsx new file mode 100644 index 0000000..20cc55a --- /dev/null +++ b/src/molecules/Grid/Grid.tsx @@ -0,0 +1,6 @@ +import { RdGridComponent } from './types'; +import { useBreakpoint } from './useBreakpoint'; + +export const Grid: RdGridComponent = { + useBreakpoint: useBreakpoint, +}; diff --git a/src/molecules/Grid/index.tsx b/src/molecules/Grid/index.tsx index c8b06a8..40b7eb8 100644 --- a/src/molecules/Grid/index.tsx +++ b/src/molecules/Grid/index.tsx @@ -1,3 +1,4 @@ export * from './Col'; +export * from './Grid'; export * from './Row'; export * from './types'; diff --git a/src/molecules/Grid/types.ts b/src/molecules/Grid/types.ts index 644c74b..5f09f62 100644 --- a/src/molecules/Grid/types.ts +++ b/src/molecules/Grid/types.ts @@ -1,9 +1,10 @@ -import { Col, GetProps, Row } from 'antd'; +import { Col, GetProps, Grid, Row } from 'antd'; import { ComponentToken as GridComponentTokenAntd } from 'antd/es/grid/style'; //#region Define Ant Design types type ColPropsAntd = GetProps; type RowPropsAntd = GetProps; +type GridPropsAntd = GetProps; //#endregion //#region Define extended component tokens @@ -13,11 +14,13 @@ type GridComponentTokenExtend = {}; //#region Define extended types type ColPropsExtend = {}; type RowPropsExtend = {}; +type GridPropsExtend = {}; //#endregion //#region Export types export type RdColProps = ColPropsAntd & ColPropsExtend; export type RdRowProps = RowPropsAntd & RowPropsExtend; +export type RdGridProps = GridPropsAntd & GridPropsExtend; export type RdGridComponentToken = GridComponentTokenAntd & GridComponentTokenExtend; //#endregion @@ -29,4 +32,5 @@ export type RdColComponent = React.ForwardRefExoticComponent< export type RdRowComponent = React.ForwardRefExoticComponent< RdRowProps & React.RefAttributes >; +export type RdGridComponent = RdGridProps; //#endregion diff --git a/src/molecules/Grid/useBreakpoint.ts b/src/molecules/Grid/useBreakpoint.ts new file mode 100644 index 0000000..8a2057b --- /dev/null +++ b/src/molecules/Grid/useBreakpoint.ts @@ -0,0 +1,3 @@ +import { Grid } from 'antd'; + +export const useBreakpoint = Grid.useBreakpoint; diff --git a/src/molecules/LineChart/index.tsx b/src/molecules/LineChart/index.tsx new file mode 100644 index 0000000..d01843e --- /dev/null +++ b/src/molecules/LineChart/index.tsx @@ -0,0 +1,42 @@ +import { LineConfig } from '@ant-design/plots'; +import { formatDate } from '../../utils/datetime'; +import { Empty } from '../Empty'; +import { LineChartWrapper } from './styles'; +import { LineChartProps } from './types'; + +export const LineChart: React.FC = props => { + const { data, valueLabel = 'value' } = props; + + if (!data?.length) return ; + + const lineProps: LineConfig = { + data, + xField: 'date' as keyof LineChartProps['data'][0], + yField: 'value' as keyof LineChartProps['data'][0], + point: { + shapeField: 'square', + sizeField: 4, + }, + interaction: { + tooltip: { + marker: false, + }, + }, + style: { + lineWidth: 2, + }, + tooltip: { + title: ({ date }) => { + return formatDate(date); + }, + items: [ + { + channel: 'y', + name: valueLabel, + }, + ], + }, + }; + + return ; +}; diff --git a/src/molecules/LineChart/styles.ts b/src/molecules/LineChart/styles.ts new file mode 100644 index 0000000..41499ee --- /dev/null +++ b/src/molecules/LineChart/styles.ts @@ -0,0 +1,4 @@ +import { Line } from '@ant-design/plots'; +import styled from '@emotion/styled' + +export const LineChartWrapper = styled(Line)``; \ No newline at end of file diff --git a/src/molecules/LineChart/types.ts b/src/molecules/LineChart/types.ts new file mode 100644 index 0000000..1a2e41a --- /dev/null +++ b/src/molecules/LineChart/types.ts @@ -0,0 +1,14 @@ +import { Line } from '@ant-design/plots/es/core/plots/line'; +import { GetProps } from 'antd'; + +export interface LineDataItem { + date: Date | string; + value: number; +} + +type LineChartPropsAntd = GetProps; + +export interface LineChartProps extends Partial { + data: LineDataItem[]; + valueLabel?: string; +} diff --git a/src/molecules/Statistic/Statistic.tsx b/src/molecules/Statistic/Statistic.tsx new file mode 100644 index 0000000..c95d54c --- /dev/null +++ b/src/molecules/Statistic/Statistic.tsx @@ -0,0 +1,13 @@ +import { forwardRef } from 'react'; +import { StatisticStyled } from './styles'; +import { Timer } from './Timer'; +import { RdStatisticComponent, RdStatisticCompoundedComponent } from './types'; + +export const InternalStatistic: RdStatisticComponent = forwardRef((props, ref) => { + return ; +}); + +export const Statistic: RdStatisticCompoundedComponent = + InternalStatistic as RdStatisticCompoundedComponent; + +Statistic.Timer = Timer; diff --git a/src/molecules/Statistic/Timer.tsx b/src/molecules/Statistic/Timer.tsx new file mode 100644 index 0000000..21cd7f6 --- /dev/null +++ b/src/molecules/Statistic/Timer.tsx @@ -0,0 +1,6 @@ +import { TimerStyled } from './styles'; +import { RdStatisticTimerComponent } from './types'; + +export const Timer: RdStatisticTimerComponent = props => { + return ; +}; diff --git a/src/molecules/Statistic/index.tsx b/src/molecules/Statistic/index.tsx new file mode 100644 index 0000000..97c212d --- /dev/null +++ b/src/molecules/Statistic/index.tsx @@ -0,0 +1,2 @@ +export * from './Statistic'; +export * from './types'; diff --git a/src/molecules/Statistic/styles.tsx b/src/molecules/Statistic/styles.tsx new file mode 100644 index 0000000..e90a725 --- /dev/null +++ b/src/molecules/Statistic/styles.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; +import { Statistic } from 'antd'; +import { RdStatisticProps } from './types'; + +export const StatisticStyled = styled(Statistic as React.FC)``; + +export const TimerStyled = styled(Statistic.Timer)``; diff --git a/src/molecules/Statistic/types.ts b/src/molecules/Statistic/types.ts new file mode 100644 index 0000000..2b9e4c1 --- /dev/null +++ b/src/molecules/Statistic/types.ts @@ -0,0 +1,71 @@ +import { Statistic, GetProps } from 'antd'; +import { ComponentToken as StatisticComponentTokenAntd } from 'antd/es/drawer/style'; +import { StatisticRef } from 'antd/es/statistic/Statistic'; +import { ComponentProps } from 'react'; + +//#region Define Ant Design types +/** + * 📝 Explanation: + * + * Normally, when styling an Ant Design component, we can simply write: + * type StatisticPropsAntd = GetProps; + * + * But Statistic is a special case: + * - Ant Design does NOT export a public interface for Statistic props (it relies on an internal type `StatisticReactProps`). + * - Because of this, when exporting styled(Statistic), TypeScript tries to expose `StatisticReactProps` and throws: + * ts(4023): "Exported variable '...' has or is using name 'StatisticReactProps' but cannot be named". + * + * 🚑 Workaround: + * - Instead of using `GetProps`, we clone the props using a mapped type to create a "public" type: + * StatisticPublicProps = { [K in keyof ComponentProps]: ComponentProps[K] } + * - Then we wrap it in a `StatisticBase` component so that styled() only sees our public type, + * avoiding any reference to the internal Ant Design type. + * + * 🔮 Note: + * - If Ant Design exports a proper `StatisticProps` type in the future, we can remove this workaround + * and go back to the shorter version: + * type StatisticPropsAntd = GetProps; + */ +type StatisticPropsAntd = { + [K in keyof ComponentProps]: ComponentProps[K]; +}; +type TimerPropsAntd = GetProps; + +type StatisticRefAntd = StatisticRef; + +//#endregion + +//#region Define extended component tokens +type StatisticComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type StatisticPropsExtend = {}; +type TimerPropsExtend = {}; + +type StatisticRefExtend = {}; +//#endregion + +//#region Export types +export type RdStatisticProps = StatisticPropsAntd & StatisticPropsExtend; +export type RdStatisticTimerProps = TimerPropsAntd & TimerPropsExtend; +export type RdStatisticRef = StatisticRefAntd & StatisticRefExtend; +export type RdStatisticComponentToken = StatisticComponentTokenAntd & StatisticComponentTokenExtend; +//#endregion + +//#region Define component types +// export type RdStatisticComponent = React.FC; +export type RdStatisticComponent = React.ForwardRefExoticComponent< + React.AriaAttributes & { + [key: `data-${string}`]: unknown; + } & Pick, 'role'> & + RdStatisticProps & + React.RefAttributes +>; + +export type RdStatisticTimerComponent = React.FC; + +export type RdStatisticCompoundedComponent = RdStatisticComponent & { + Timer: RdStatisticTimerComponent; +}; +//#endregion diff --git a/src/molecules/index.ts b/src/molecules/index.ts index 63f7a60..ce79b33 100644 --- a/src/molecules/index.ts +++ b/src/molecules/index.ts @@ -37,6 +37,7 @@ export * from './Skeleton'; export * from './Slider'; export * from './Space'; export * from './Spin'; +export * from './Statistic'; export * from './Steps'; export * from './Switch'; export * from './Table'; diff --git a/src/organisms/SummaryCard/styles.tsx b/src/organisms/SummaryCard/styles.tsx index d907824..4a0971b 100644 --- a/src/organisms/SummaryCard/styles.tsx +++ b/src/organisms/SummaryCard/styles.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import Statistic from 'antd/es/statistic/Statistic'; import { Card } from '../../molecules'; +import { Statistic } from '../../molecules/Statistic'; export const SummaryCardWrapper = styled(Card)``; diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx index 2bcac23..89bc441 100644 --- a/src/templates/DashboardTemplate/DashboardTemplate.tsx +++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import { forwardRef, useState } from 'react'; import { Layout } from '../../molecules'; import DashboardTemplateFooter from './Footer'; import DashboardTemplateHeader from './Header'; @@ -18,25 +18,74 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop fitScreen = false, ...restProps } = props; + const [collapsed, setCollapsed] = useState(false); - return ( - - {headerProps && } - - - {siderProps && } + const handleToggleSider = () => { + setCollapsed(!collapsed); + }; + const renderFullHeightLayout = () => ( + + {siderProps && ( + + )} + + {headerProps && ( + + )} {props.children} - {footerProps && ( - - )} + {footerProps && } ); + + const renderContentHeightLayout = () => ( + + {headerProps && ( + + )} + + {siderProps && ( + + )} + + + {props.children} + + {footerProps && } + + + + ); + + const sidebarMode = props.siderProps?.sidebarMode; // 'fullHeight' | 'contentHeight'; + + return sidebarMode === 'fullHeight' ? renderFullHeightLayout() : renderContentHeightLayout(); }); export const DashboardTemplate = diff --git a/src/templates/DashboardTemplate/Header/index.tsx b/src/templates/DashboardTemplate/Header/index.tsx index 7d23b5a..77ed542 100644 --- a/src/templates/DashboardTemplate/Header/index.tsx +++ b/src/templates/DashboardTemplate/Header/index.tsx @@ -1,10 +1,10 @@ import { forwardRef } from 'react'; -import { DashboardTemplateHeaderStyles } from './styles'; +import { DashboardTemplateHeaderContent, DashboardTemplateHeaderStyles } from './styles'; import { RdDashboardTemplateHeaderComponent } from './types'; export const DashboardTemplateHeader: RdDashboardTemplateHeaderComponent = forwardRef( (props, ref) => { - const { children, render, ...restProps } = props; + const { children, render, collapsed, toggleSider, ...restProps } = props; if (render) { return render({ children, ...restProps }); @@ -12,7 +12,7 @@ export const DashboardTemplateHeader: RdDashboardTemplateHeaderComponent = forwa return ( - {children} + {children} ); } diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx index cbdaebd..e6fd68c 100644 --- a/src/templates/DashboardTemplate/Header/styles.tsx +++ b/src/templates/DashboardTemplate/Header/styles.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { Layout } from 'antd'; import { getAliasToken, getExcludeForwardProps } from '../../../utils'; import { RdDashboardTemplateHeaderProps } from './types'; +import { Flex } from '../../../atomics'; export const DashboardTemplateHeaderStyles = styled(Layout.Header, { label: 'rd-dashboard-template-header', @@ -12,14 +13,22 @@ export const DashboardTemplateHeaderStyles = styled(Layout.Header, { prop ), })>` + display: flex; + justify-content: space-between; + ${({ fixedOnScroll }) => { + const zIndexBase = getAliasToken('DashboardTemplate', 'zIndexBase') || 0; + const zIndexHeader = zIndexBase; + return ( fixedOnScroll && css` position: sticky; top: 0; - z-index: ${getAliasToken('DashboardTemplate', 'zIndexBase')}; + z-index: ${zIndexHeader}; ` ); }} `; + +export const DashboardTemplateHeaderContent = styled(Flex)``; diff --git a/src/templates/DashboardTemplate/Header/types.ts b/src/templates/DashboardTemplate/Header/types.ts index 1739488..4f263e3 100644 --- a/src/templates/DashboardTemplate/Header/types.ts +++ b/src/templates/DashboardTemplate/Header/types.ts @@ -12,5 +12,9 @@ export type RdDashboardTemplateHeaderProps = RdHeaderProps & DashboardTemplateHe export type RdDashboardTemplateHeaderRef = RdLayoutHeaderRef & {}; export type RdDashboardTemplateHeaderComponent = React.ForwardRefExoticComponent< - RdDashboardTemplateHeaderProps & RdDashboardTemplateHeaderRef + RdDashboardTemplateHeaderProps & + RdDashboardTemplateHeaderRef & { + collapsed: boolean; + toggleSider: () => void; + } >; diff --git a/src/templates/DashboardTemplate/Sider/constants.ts b/src/templates/DashboardTemplate/Sider/constants.ts new file mode 100644 index 0000000..84dc892 --- /dev/null +++ b/src/templates/DashboardTemplate/Sider/constants.ts @@ -0,0 +1 @@ +export const DEFAULT_COLLAPSED_WIDTH = 68; \ No newline at end of file diff --git a/src/templates/DashboardTemplate/Sider/index.tsx b/src/templates/DashboardTemplate/Sider/index.tsx index f65685f..8945d06 100644 --- a/src/templates/DashboardTemplate/Sider/index.tsx +++ b/src/templates/DashboardTemplate/Sider/index.tsx @@ -1,29 +1,79 @@ -import { forwardRef, useState } from 'react'; +import { forwardRef, useEffect, useState } from 'react'; +import { Grid } from '../../../molecules'; import { getComponentToken } from '../../../utils'; -import { DashboardTemplateSiderStyles } from './styles'; +import { DEFAULT_COLLAPSED_WIDTH } from './constants'; +import { + DashboardTemplateHeaderSidebarStyled, + DashboardTemplateSiderContentStyled, + DashboardTemplateSiderStyles, +} from './styles'; import { RdDashboardTemplateSiderComponent } from './types'; export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forwardRef( (props, ref) => { - const { children, render, ...restProps } = props; - const [collapsed, setCollapsed] = useState(false); + const { + children, + breakpoint = 'lg', + sidebarMode = 'fullHeight', + headerSidebar, + collapsed, + fixedOnScroll = true, + fixedHeaderOnScroll = true, + render, + toggleSider, + ...restProps + } = props; + const [fixed, setFixed] = useState(false); const siderWidth = getComponentToken('DashboardTemplate', 'siderWidth'); + const [collapsedWith, setCollapsedWidth] = useState( + DEFAULT_COLLAPSED_WIDTH + ); if (render) { return render({ children, ...restProps }); } + const screens = Grid.useBreakpoint(); + + useEffect(() => { + // On smaller screens, we want the sidebar to be fixed and overlay the content + if (!screens.lg && sidebarMode === 'fullHeight') { + setFixed(true); + + if (sidebarMode === 'fullHeight') { + setCollapsedWidth(0); + } else { + setCollapsedWidth(DEFAULT_COLLAPSED_WIDTH); + } + } else { + setFixed(false); + setCollapsedWidth(DEFAULT_COLLAPSED_WIDTH); + } + }, [screens.lg]); + return ( setCollapsed(value)} + onCollapse={toggleSider} + breakpoint={breakpoint} + fixed={fixed} + sidebarMode={sidebarMode} + fixedOnScroll={fixedOnScroll} {...restProps} > - {children} + {sidebarMode === 'fullHeight' && ( + + {headerSidebar?.(collapsed ?? false)} + + )} + + + {children} + ); } diff --git a/src/templates/DashboardTemplate/Sider/styles.tsx b/src/templates/DashboardTemplate/Sider/styles.tsx index ec9ac3c..58bea1b 100644 --- a/src/templates/DashboardTemplate/Sider/styles.tsx +++ b/src/templates/DashboardTemplate/Sider/styles.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Layout } from 'antd'; -import { getComponentToken, getExcludeForwardProps } from '../../../utils'; +import { getAliasToken, getComponentToken, getExcludeForwardProps } from '../../../utils'; +import { getBorderInlineEndStyle, getColorBgHeaderSiderStyle } from '../helper'; import { RdDashboardTemplateSiderProps } from './types'; export const DashboardTemplateSiderStyles = styled(Layout.Sider, { @@ -11,19 +12,85 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, { ['fixedOnScroll'] as (keyof Omit)[], prop ), -})>` - ${() => css` - overflow: auto; - inset-inline-start: 0; - height: 100%; - `} +})>` + ${({ fixedOnScroll }) => { + const zIndexBase = getAliasToken('DashboardTemplate', 'zIndexBase') || 0; + const zIndexSider = zIndexBase + 1; + + return css` + overflow: visible; + inset-inline-start: 0; + ${fixedOnScroll && + css` + height: 100%; + `} + z-index: ${zIndexSider}; + `; + }} + + ${({ fixedOnScroll, sidebarMode }) => { + if (fixedOnScroll) { + if (sidebarMode === 'fullHeight') { + return css` + height: 100vh; + position: sticky; + top: 0; + `; + } + + return css` + height: calc(100vh - ${getComponentToken('Layout', 'headerHeight')}px); + position: sticky; + top: ${getComponentToken('Layout', 'headerHeight')}px; + bottom: 0; + `; + } + }} + + ${({ fixed }) => + fixed && + css` + position: fixed; + height: 100vh; + top: 0; + left: 0; + bottom: 0; + `} + + ${() => { + return css` + .ant-layout-sider-children, + .ant-layout-sider-trigger { + border-inline-end: ${getBorderInlineEndStyle()}; + } + `; + }} +`; + +export const DashboardTemplateHeaderSidebarStyled = styled('div', { + label: 'rd-dashboard-template-header-sidebar', +})<{ fixedOnScroll?: boolean }>` + position: relative; + + ${() => { + const zIndexBase = getAliasToken('DashboardTemplate', 'zIndexBase') || 0; + const zIndexHeaderSider = zIndexBase + 1; + + return css` + height: ${getComponentToken('Layout', 'headerHeight')}px; + background-color: ${getColorBgHeaderSiderStyle()}; + z-index: ${zIndexHeaderSider}; + `; + }} ${({ fixedOnScroll }) => fixedOnScroll && css` - height: calc(100vh - ${getComponentToken('Layout', 'headerHeight')}px); position: sticky; - top: ${getComponentToken('Layout', 'headerHeight')}px; - bottom: 0; + top: 0; `} `; + +export const DashboardTemplateSiderContentStyled = styled.div` + ${() => css``} +`; diff --git a/src/templates/DashboardTemplate/Sider/types.ts b/src/templates/DashboardTemplate/Sider/types.ts index ef5a0f5..fea139c 100644 --- a/src/templates/DashboardTemplate/Sider/types.ts +++ b/src/templates/DashboardTemplate/Sider/types.ts @@ -1,10 +1,16 @@ -import { RdLayoutSiderRef, RdSiderProps } from "../../../molecules"; +import { RdLayoutSiderRef, RdSiderProps } from '../../../molecules'; //#region Define extended types +type SidebarMode = 'fullHeight' | 'contentHeight'; + export type DashboardTemplateSiderPropsExtend = { fixedOnScroll?: boolean; + fixedHeaderOnScroll?: boolean; render?: (props: Omit) => React.ReactNode; + + headerSidebar?: (collapsed: boolean) => React.ReactNode; + sidebarMode?: SidebarMode; }; //#endregion @@ -12,5 +18,8 @@ export type RdDashboardTemplateSiderProps = RdSiderProps & DashboardTemplateSide export type RdDashboardTemplateSiderRef = RdLayoutSiderRef & {}; export type RdDashboardTemplateSiderComponent = React.ForwardRefExoticComponent< - RdDashboardTemplateSiderProps & RdDashboardTemplateSiderRef + RdDashboardTemplateSiderProps & + RdDashboardTemplateSiderRef & { + toggleSider: () => void; + } >; diff --git a/src/templates/DashboardTemplate/constants.ts b/src/templates/DashboardTemplate/constants.ts new file mode 100644 index 0000000..dae0790 --- /dev/null +++ b/src/templates/DashboardTemplate/constants.ts @@ -0,0 +1,4 @@ +export const DEFAULT_DESIGN_TOKEN = { + COLOR_BORDER_INLINE_END: '#ddd', + WIDTH_BORDER_INLINE_END: 1, +}; diff --git a/src/templates/DashboardTemplate/helper.ts b/src/templates/DashboardTemplate/helper.ts new file mode 100644 index 0000000..324792f --- /dev/null +++ b/src/templates/DashboardTemplate/helper.ts @@ -0,0 +1,21 @@ +import { getComponentToken } from '../../utils'; +import { DEFAULT_DESIGN_TOKEN } from './constants'; + +export const getBorderInlineEndStyle = () => { + const widthBorderInlineEnd = + getComponentToken('DashboardTemplate', 'widthBorderInlineEnd') ?? + DEFAULT_DESIGN_TOKEN.WIDTH_BORDER_INLINE_END; + const colorBorderInlineEnd = + getComponentToken('DashboardTemplate', 'colorBorderInlineEnd') ?? + DEFAULT_DESIGN_TOKEN.COLOR_BORDER_INLINE_END; + + return `${widthBorderInlineEnd}px solid ${colorBorderInlineEnd}`; +}; + +export const getColorBgHeaderSiderStyle = () => { + const bgColorHeaderSider = + getComponentToken('DashboardTemplate', 'colorBgHeaderSider') ?? + getComponentToken('Layout', 'headerBg'); + + return bgColorHeaderSider; +}; diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx index 9c7986f..6618dc6 100644 --- a/src/templates/DashboardTemplate/styles.tsx +++ b/src/templates/DashboardTemplate/styles.tsx @@ -32,7 +32,7 @@ export const DashboardTemplateContent = styled(Layout.Content, { }>` display: flex; align-items: stretch; - + ${() => css` padding: ${getComponentToken('DashboardTemplate', 'contentPadding') || '32px 32px'}; `} diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts index cffec4c..a9c8057 100644 --- a/src/templates/DashboardTemplate/types.ts +++ b/src/templates/DashboardTemplate/types.ts @@ -7,6 +7,9 @@ import { RdDashboardTemplateSiderComponent, RdDashboardTemplateSiderProps } from type DashboardTemplateComponentTokenExtend = { contentPadding?: string; siderWidth?: number; + colorBorderInlineEnd?: string; + widthBorderInlineEnd?: number; + colorBgHeaderSider?: string; }; //#endregion