feat(Table, HS, BackgroundImage): add new view for Table and fix desi…

…gn bugs (#622)
gravity-ui · Oct 6, 2023 · b2fe177 · b2fe177
1 parent 6655545
commit b2fe177
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 5 deletions.
diff --git a/src/blocks/Table/__stories__/Table.stories.tsx b/src/blocks/Table/__stories__/Table.stories.tsx
@@ -20,3 +20,7 @@ const DefaultTemplate: StoryFn<TableBlockModel> = (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
@@ -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
@@ -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
@@ -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<TableProps & ClassNameProps> {
     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<TableProps & ClassNameProps>
         return (
             <div className={b(null, className)} role={'table'} aria-label={caption}>
                 {this.renderTable(content, marker, legend)}
-                {legend && this.renderLegend(legend, marker)}
+                {legend && !hideLegend && this.renderLegend(legend, marker)}
             </div>
         );
     }
@@ -59,7 +62,9 @@ export default class Table extends React.Component<TableProps & ClassNameProps>
             <div
                 aria-labelledby={getMarkerId(Number(cell))}
                 className={b('marker', {type, index: String(cell)})}
-            />
+            >
+                {type === 'tick' ? <Icon data={Number(cell) === 1 ? Tick : Minus} /> : null}
+            </div>
         );
     }
 

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -17,3 +17,7 @@ const DefaultTemplate: StoryFn<TableProps> = (args) => <Table {...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
@@ -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
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {a11yHiddenSvgProps} from '../utils/svg';
+
+export const Minus: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        stroke="none"
+        {...a11yHiddenSvgProps}
+        {...props}
+    >
+        <path
+            fill="#B5BFC6"
+            fillRule="evenodd"
+            d="M1.969 9c0-.466.378-.844.843-.844h12.376a.844.844 0 0 1 0 1.688H2.812A.844.844 0 0 1 1.97 9Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
diff --git a/src/icons/Tick.tsx b/src/icons/Tick.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {a11yHiddenSvgProps} from '../utils/svg';
+
+export const Tick: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        stroke="none"
+        {...a11yHiddenSvgProps}
+        {...props}
+    >
+        <g clipPath="url(#a)">
+            <path
+                fill="#37F"
+                fillRule="evenodd"
+                d="M15.174 3.86a.844.844 0 0 1 .092 1.19l-6.75 7.874a.843.843 0 0 1-1.238.048L3.341 9.034a.844.844 0 1 1 1.193-1.193l3.293 3.293 6.157-7.183a.844.844 0 0 1 1.19-.092Z"
+                clipRule="evenodd"
+            />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path fill="#fff" d="M0 0h18v18H0z" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git 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
@@ -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
@@ -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
@@ -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