diff --git a/src/blocks/Table/__stories__/Table.stories.tsx b/src/blocks/Table/__stories__/Table.stories.tsx index 59cbf1ed0..f4092d865 100644 --- a/src/blocks/Table/__stories__/Table.stories.tsx +++ b/src/blocks/Table/__stories__/Table.stories.tsx @@ -20,3 +20,7 @@ const DefaultTemplate: StoryFn = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = data.default.content as TableBlockModel; + +export const Tick = DefaultTemplate.bind({}); + +Tick.args = data.tick.content as TableBlockModel; diff --git a/src/blocks/Table/__stories__/data.json b/src/blocks/Table/__stories__/data.json index 24ee99902..5ccdd1c45 100644 --- a/src/blocks/Table/__stories__/data.json +++ b/src/blocks/Table/__stories__/data.json @@ -16,5 +16,25 @@ "justify": ["start", "center", "center", "center"] } } + }, + "tick": { + "content": { + "type": "table-block", + "title": "Lorem ipsum dolor sit amet", + "table": { + "content": [ + ["Lorem", "ipsum dolor sit", "amet", "minim"], + ["Ut enim ad minim veniam", "0", "0", "0"], + ["Ut enim ad minim veniam", "0", "0", "1"], + ["Ut enim ad minim veniam", "1", "0", "0"], + ["Ut enim ad minim veniam", "0", "1", "1"], + ["Ut enim ad minim veniam", "1", "1", "1"] + ], + "marker": "tick", + "hideLegend": true, + "legend": ["Lorem", "ipsum"], + "justify": ["start", "center", "center", "center"] + } + } } } diff --git a/src/blocks/Table/schema.ts b/src/blocks/Table/schema.ts index 6e3600986..980e9ac66 100644 --- a/src/blocks/Table/schema.ts +++ b/src/blocks/Table/schema.ts @@ -42,13 +42,16 @@ export const TableBlock = { contentType: 'yfm', }, }, + hideLegend: { + type: 'boolean', + }, justify: { type: 'array', items: JustifyProps, }, marker: { type: 'string', - enum: ['disk'], + enum: ['disk', 'tick'], }, }, }, diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 36e716aad..2b7d963a1 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,6 +1,9 @@ import React from 'react'; +import {Icon} from '@gravity-ui/uikit'; + import {HTML, YFMWrapper} from '../'; +import {Minus, Tick} from '../../icons'; import {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models'; import {block} from '../../utils'; @@ -18,7 +21,7 @@ const b = block('table'); export default class Table extends React.Component { render() { - const {content, legend, marker = 'disk', className, caption} = this.props; + const {content, legend, hideLegend, marker = 'disk', className, caption} = this.props; if (!content || !content.length || !content[0].length) { return null; @@ -27,7 +30,7 @@ export default class Table extends React.Component return (
{this.renderTable(content, marker, legend)} - {legend && this.renderLegend(legend, marker)} + {legend && !hideLegend && this.renderLegend(legend, marker)}
); } @@ -59,7 +62,9 @@ export default class Table extends React.Component
+ > + {type === 'tick' ? : null} +
); } diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx index 0454bac0b..d207c85eb 100644 --- a/src/components/Table/__stories__/Table.stories.tsx +++ b/src/components/Table/__stories__/Table.stories.tsx @@ -17,3 +17,7 @@ const DefaultTemplate: StoryFn = (args) => ; export const Default = DefaultTemplate.bind({}); Default.args = data.default.content as TableProps; + +export const Tick = DefaultTemplate.bind({}); + +Tick.args = data.tick.content as TableProps; diff --git a/src/components/Table/__stories__/data.json b/src/components/Table/__stories__/data.json index 0bb11b4dc..fc75acdb1 100644 --- a/src/components/Table/__stories__/data.json +++ b/src/components/Table/__stories__/data.json @@ -5,10 +5,26 @@ ["Lorem", "ipsum dolor sit", "amet", "minim"], ["Ut enim ad minim veniam", "0", "0", "0"], ["Ut enim ad minim veniam", "0", "0", "1"], + ["Ut enim ad minim veniam", "0", "2", "1"], + ["Ut enim ad minim veniam", "0", "1", "1"], + ["Ut enim ad minim veniam", "1", "1", "1"] + ], + "legend": ["Lorem", "ipsum"], + "justify": ["start", "center", "center", "center"] + } + }, + "tick": { + "content": { + "content": [ + ["Lorem", "ipsum dolor sit", "amet", "minim"], + ["Ut enim ad minim veniam", "0", "0", "0"], ["Ut enim ad minim veniam", "0", "0", "1"], + ["Ut enim ad minim veniam", "1", "0", "0"], ["Ut enim ad minim veniam", "0", "1", "1"], ["Ut enim ad minim veniam", "1", "1", "1"] ], + "marker": "tick", + "hideLegend": true, "legend": ["Lorem", "ipsum"], "justify": ["start", "center", "center", "center"] } diff --git a/src/icons/Minus.tsx b/src/icons/Minus.tsx new file mode 100644 index 000000000..7840de331 --- /dev/null +++ b/src/icons/Minus.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import {a11yHiddenSvgProps} from '../utils/svg'; + +export const Minus: React.FC> = (props) => ( + + + +); diff --git a/src/icons/Tick.tsx b/src/icons/Tick.tsx new file mode 100644 index 000000000..bfc5c771e --- /dev/null +++ b/src/icons/Tick.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import {a11yHiddenSvgProps} from '../utils/svg'; + +export const Tick: React.FC> = (props) => ( + + + + + + + + + + +); diff --git a/src/icons/index.ts b/src/icons/index.ts index ae3da516b..e0f5230bd 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -9,3 +9,5 @@ export * from './PreviewClose'; export * from './NavigationClose'; export * from './NavigationOpen'; export * from './NavigationArrow'; +export * from './Tick'; +export * from './Minus'; diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index ce2a18baf..14831aada 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -251,6 +251,7 @@ export interface InfoBlockProps { export interface TableProps { content: string[][]; legend?: string[]; + hideLegend?: boolean; justify?: Justify[]; marker?: LegendTableMarkerType; /** diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index e75d39592..5906c8b2f 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -64,7 +64,7 @@ export type HeaderImageSize = 's' | 'm'; export type HeaderOffset = 'default' | 'large'; export type Justify = 'start' | 'center' | 'end'; export type ColumnsCount = 1 | 2 | 3 | 4; -export type LegendTableMarkerType = 'disk'; +export type LegendTableMarkerType = 'disk' | 'tick'; export type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline'; export type MediaDirection = 'media-content' | 'content-media'; export type PriceDescriptionColor = 'cornflower' | 'black'; diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss index d146a3309..929e3d2ea 100644 --- a/src/sub-blocks/HubspotForm/HubspotForm.scss +++ b/src/sub-blocks/HubspotForm/HubspotForm.scss @@ -110,6 +110,17 @@ $block: '.#{$ns}hubspot-form'; border: 1px solid var(--g-color-line-generic-active); } } + + .hs-fieldtype-intl-phone.hs-input .hs-input { + float: none; + // Hubspot script set important for these elements, so we also need to use important + /* stylelint-disable-next-line declaration-no-important */ + width: 100% !important; + + & + .hs-input { + margin-top: 10px; + } + } } // fields with horizontal orientation