Skip to content

Commit

Permalink
Merge pull request #86 from KasperskyLab/feature/add-datepicker-l18n
Browse files Browse the repository at this point in the history
feat: add datepicker l18n
  • Loading branch information
vostrik authored Oct 31, 2024
2 parents 55e8aa1 + db3d103 commit d1c6b27
Show file tree
Hide file tree
Showing 26 changed files with 1,154 additions and 233 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React, { FC, useMemo } from 'react'
import styled from 'styled-components'
import { Tag } from '@src/tag'
import { metaDod, MetaDodProps } from './types'

const StyledTableContainer = styled.div`
&&&&& {
width: 300px;
td, th, tr {
background: transparent;
border: none;
}
}
`

type MetaDodKeys = keyof MetaDodProps['list']

export const MetaDod: FC<MetaDodProps> = ({ list }: MetaDodProps) => {
const metaDodKeys = useMemo(() => Object.keys(metaDod) as MetaDodKeys[], [])

return (
<StyledTableContainer>
<table>
<thead>
<tr>
{
metaDodKeys.map(key => (
<td>{metaDod[key]}</td>
))
}
</tr>
</thead>
<tbody>
<tr>
{
metaDodKeys.map(key => (
<td>
<Tag mode={list[key] ? 'grass' : 'red'}>
{list[key] ? 'ready' : 'need'}
</Tag>
</td>
))
}
</tr>
</tbody>
</table>
</StyledTableContainer>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { withMeta } from './withMeta'
23 changes: 23 additions & 0 deletions packages/kaspersky-components/.storybook/components/Meta/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export type MetaList = {
dod?: MetaDodProps['list'],
component?: string,
description?: string,
usage?: string,
designLink?: string,
figmaView?: string
}

export const metaDod = {
designTokens: 'Design tokens',
useThemedHook: 'Theme hook',
unitTests: 'Unit tests',
screenshotTests: 'Screenshot tests',
migration: 'Migration',
apiTable: 'Api',
storybook: 'Storybook',
figmaView: 'Figma'
}

export type MetaDodProps = {
list: Partial<Record<keyof typeof metaDod, boolean>>
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {
Title,
Subtitle,
Markdown,
Primary,
ArgTypes,
Stories,
PRIMARY_STORY
} from '@storybook/blocks'
import React from 'react'

import { MetaDod } from './MetaDod'
import { MetaList } from './types'

export function withMeta (
list: MetaList,
Component?: React.FC
): React.FC {
const setMeta = (props: any) => {
return (
<>
<Title>{list.component}</Title>
{list.dod && <MetaDod list={list.dod} />}
<Subtitle>Описание</Subtitle>
{list.description ? <Markdown>{list.description}</Markdown> : '-'}
<Subtitle>Использование</Subtitle>
{list.usage ? <Markdown>{list.usage}</Markdown>: '-'}
{list.designLink && <Markdown>{`[Дизайн](${list.designLink})`}</Markdown>}
{Component && <Component {...props} />}
<Primary />
<ArgTypes of={PRIMARY_STORY} />
<Stories title={'Variants of View'} />
</>
)
}
return setMeta
}
18 changes: 18 additions & 0 deletions packages/kaspersky-components/.storybook/helpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Addon_ArgType } from '@storybook/types'

export const sbSetDefaultValue = (text: string) => ({
table: { defaultValue: { summary: text } }
})

export const sbHideControl = { control: false } as SBArgType

export const sbHideControls = (controls: string[]) => (
controls.reduce((acc, control) => {
acc[control] = { control: false }
return acc
}, {} as SBArgTypes)
)

export type SBArgType = Addon_ArgType
export type SBArgTypes = { [key in string]: SBArgType }
export type SBArgTypeControl = SBArgType['control']
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const {
tagsoutlined,
surface,
'main-interact': mainInteract,
'danger-interact': dangerInteract
'danger-interact': dangerInteract,
calendar_dropdown_button,
calendar_preset_button,
calendar_dropdown
}
} = shortcuts

Expand Down Expand Up @@ -75,5 +78,8 @@ export const colors = {
surface,
mainInteract,
dangerInteract,
defaultPalette
defaultPalette,
calendar_dropdown_button,
calendar_preset_button,
calendar_dropdown
}
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
import { PickerColorConfig } from '@src/datepicker/types'

import { ComponentThemeContext } from '../config'

export const picker = ({ colors }: ComponentThemeContext): PickerColorConfig => {
return {
separatorColor: colors.elements['separator-solid'],
iconColor: colors.textIconsElements.primary,
separator: colors.calendar_dropdown.border,
boxShadow: '0px 0px 1px 0px rgba(9, 30, 66, 0.64), 0px 3px 5px 0px rgba(9, 30, 66, 0.20)',
unSelected: {
normal: {
background: colors.bg.base,
color: colors.textIconsElements.primary,
borderColor: colors.mainInteractPrimary
unselected: {
enabled: {
background: colors.calendar_dropdown_button.bg.base.enabled,
color: colors.calendar_dropdown_button.text.base.enabled,
border: colors.calendar_dropdown_button.border.base.enabled
},
hover: {
background: colors.elements['separator-solid']
background: colors.calendar_dropdown_button.bg.base.hover
},
active: {
background: colors.elements['separator-bold-solid']
background: colors.calendar_dropdown_button.bg.base.active
},
disabled: {
background: colors.elements['separator-solid'],
color: colors.textIconsElements['disabled-solid'],
borderColor: colors.textIconsElements['disabled-solid']
background: colors.calendar_dropdown_button.bg.inactive.enabled,
color: colors.calendar_dropdown_button.text.inactive.enabled,
border: colors.calendar_dropdown_button.border.inactive.enabled
}
},
selected: {
normal: {
background: colors.mainInteractPrimary,
color: colors.textIconsElements['primary-invert']
enabled: {
background: colors.calendar_dropdown_button.bg.selected.enabled,
color: colors.calendar_dropdown_button.text.selected.enabled
},
hover: {
background: colors.mainInteractSecondary
background: colors.calendar_dropdown_button.bg.selected.hover
},
active: {
background: colors.mainInteractTertiary
background: colors.calendar_dropdown_button.bg.selected.active
}
},
inRange: {
normal: {
background: colors.mainInteractPrimaryInverted,
color: colors.textIconsElements.primary,
borderColor: colors.mainInteractPrimary
between: {
enabled: {
background: colors.calendar_dropdown_button.bg.between.enabled,
color: colors.calendar_dropdown_button.text.between.enabled,
border: colors.calendar_dropdown_button.border.between.enabled
},
hover: {
background: colors.mainInteractSecondaryInverted
background: colors.calendar_dropdown_button.bg.between.hover
},
active: {
background: colors.mainInteractTertiaryInverted
background: colors.calendar_dropdown_button.bg.between.active
}
}
}
Expand Down
Loading

0 comments on commit d1c6b27

Please sign in to comment.