diff --git a/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx b/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx index dc8117fcf..5afc05230 100644 --- a/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx +++ b/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import yfm from '@doc-tools/transform'; import {Meta, Story} from '@storybook/react/types-6-0'; import {ContentLayoutBlockModel, ContentLayoutBlockProps} from '../../../models'; import Content from '../ContentLayout'; @@ -46,7 +47,7 @@ const ThemesTemplate: Story = (args) => ( { ...args, properties: { - ...args, + ...args.properties, theme: 'dark', background: { style: { @@ -76,7 +77,7 @@ const ThemesTemplate: Story = (args) => ( { ...args, properties: { - ...args, + ...args.properties, theme: 'light', background: { style: { @@ -114,17 +115,17 @@ const TextWidthTemplate: Story = (args) => ( blocks: [ { ...args, - properties: {...args, textWidth: 's'}, + properties: {...args.properties, textWidth: 's'}, textContent: {title: getTextWidthTitle('S'), ...args.textContent}, }, { ...args, - properties: {...args, textWidth: 'm'}, + properties: {...args.properties, textWidth: 'm'}, textContent: {title: getTextWidthTitle('M'), ...args.textContent}, }, { ...args, - properties: {...args, textWidth: 'l'}, + properties: {...args.properties, textWidth: 'l'}, textContent: {title: getTextWidthTitle('L'), ...args.textContent}, }, ], @@ -138,15 +139,15 @@ const TextWidthTemplateWithoutTitle: Story = (args) => blocks: [ { ...args, - properties: {...args, textWidth: 's'}, + properties: {...args.properties, textWidth: 's'}, }, { ...args, - properties: {...args, textWidth: 'm'}, + properties: {...args.properties, textWidth: 'm'}, }, { ...args, - properties: {...args, textWidth: 'l'}, + properties: {...args.properties, textWidth: 'l'}, }, ], }} @@ -163,13 +164,102 @@ export const Theme = ThemesTemplate.bind([]); export const TextWidth = TextWidthTemplate.bind([]); export const TextWidthWithoutTitle = TextWidthTemplateWithoutTitle.bind([]); -Default.args = data.default.content as ContentLayoutBlockProps; -WithFiles.args = data.withFiles.content as ContentLayoutBlockProps; -Size.args = data.size.content as ContentLayoutBlockProps; -WithBackgroundSizeS.args = data.withBackgroundSizeS.content as ContentLayoutBlockProps; -WithImageAndBackgroundSizeL.args = data.withImageAndBackgroundSizeL - .content as ContentLayoutBlockProps; -WithImageSizeSCentered.args = data.withImageSizeSCentered.content as ContentLayoutBlockProps; -Theme.args = data.theme.content as ContentLayoutBlockProps; -TextWidth.args = data.textWidth.content as ContentLayoutBlockProps; -TextWidthWithoutTitle.args = data.textWidthWithoutTitle.content as ContentLayoutBlockProps; +Default.args = { + ...data.default.content, + textContent: { + ...data.default.content.textContent, + title: data.common.title, + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + }, +} as ContentLayoutBlockProps; + +WithFiles.args = { + ...data.withFiles.content, + textContent: { + ...data.withFiles.content.textContent, + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +Size.args = { + ...data.size.content, + textContent: { + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +WithBackgroundSizeS.args = { + ...data.withBackgroundSizeS.content, + textContent: { + ...data.withBackgroundSizeS.content.textContent, + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +WithImageAndBackgroundSizeL.args = { + ...data.withImageAndBackgroundSizeL.content, + textContent: { + ...data.withImageAndBackgroundSizeL.content.textContent, + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +WithImageSizeSCentered.args = { + ...data.withImageSizeSCentered.content, + textContent: { + ...data.withImageSizeSCentered.content.textContent, + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, +} as ContentLayoutBlockProps; + +Theme.args = { + ...data.theme.content, + textContent: { + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +TextWidth.args = { + ...data.textWidth.content, + textContent: { + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; + +TextWidthWithoutTitle.args = { + ...data.textWidthWithoutTitle.content, + textContent: { + text: yfm(data.common.text).result.html, + additionalInfo: yfm(data.common.additionalInfo).result.html, + buttons: data.common.buttons, + links: data.common.links, + }, + fileContent: data.common.fileContent, +} as ContentLayoutBlockProps; diff --git a/src/blocks/ContentLayout/__stories__/data.json b/src/blocks/ContentLayout/__stories__/data.json index 7f3d218f5..a52b72539 100644 --- a/src/blocks/ContentLayout/__stories__/data.json +++ b/src/blocks/ContentLayout/__stories__/data.json @@ -1,168 +1,69 @@ { + "common": { + "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", + "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "buttons": [ + { + "text": "Button\r", + "theme": "action", + "url": "https://example.com" + }, + { + "text": "Button", + "theme": "outlined", + "url": "https://example.com" + } + ], + "links": [ + { + "url": "https://example.com", + "text": "Link", + "theme": "normal", + "arrow": true + } + ], + "fileContent": [ + { + "href": "https://example.xls", + "text": "File xls" + }, + { + "href": "https://example.fig", + "text": "File PNG, JPG, and SVG format" + }, + { + "href": "https://example.pdf", + "text": "Pdf file" + }, + { + "href": "https://example.zip", + "text": "Archive file" + }, + { + "href": "https://example.doc", + "text": "Microsoft Word document" + }, + { + "href": "https://example.ppt", + "text": "PPT file" + } + ] + }, "withFiles": { "content": { "type": "content-layout-block", "textContent": { "title": { - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt", "url": "https://example.ru" - }, - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "Back", - "theme": "back", - "arrow": true - }, - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#1", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#2", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#3", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" } - ] + } } }, "textWidthWithoutTitle": { "content": { - "type": "content-layout-block", - "properties": { - "textWidth": "s", - "size": "s" - }, - "textContent": { - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "
  1. Duis aute irure dolor in reprehenderit
  2. in voluptate velit esse
  3. cillum dolore eu fugiat nulla pariatur.
", - "links": [ - { - "url": "https://example.com", - "text": "Back", - "theme": "normal", - "arrow": true - }, - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#1", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#2", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#3", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "File PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "Pdf file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "type": "content-layout-block" } }, "withImageAndBackgroundSizeL": { @@ -177,196 +78,20 @@ } }, "textContent": { - "title": "A cube of size L with a background and image", - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "title": "A cube of size L with a background and image" + } } }, "textWidth": { "title": "Text width {{textWidth}}", "content": { - "type": "content-layout-block", - "properties": { - "size": "s" - }, - "textContent": { - "title": "Text width S", - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "
  • Duis aute irure dolor in reprehenderit in 2018 and in voluptate velit esse
  • cillum dolore eu fugiat nulla pariatur.
", - "links": [ - { - "url": "https://example.com", - "text": "Back", - "theme": "normal", - "arrow": true - }, - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#1", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#2", - "text": "Link", - "theme": "normal", - "arrow": true - }, - { - "url": "#3", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "type": "content-layout-block" } }, "size": { "title": "Size {{size}} cube", "content": { - "type": "content-layout-block", - "textContent": { - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "type": "content-layout-block" } }, "withBackgroundSizeS": { @@ -381,56 +106,8 @@ } }, "textContent": { - "title": "A cube of size S with a background", - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "title": "A cube of size S with a background" + } } }, "withImageSizeSCentered": { @@ -444,29 +121,7 @@ "centered": true }, "textContent": { - "title": "A cube of size S with an image, centered", - "text": "

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" - } - ] + "title": "A cube of size S with an image, centered" } } }, @@ -474,27 +129,36 @@ "content": { "type": "content-layout-block", "textContent": { - "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", - "text": "

Lorem ipsum

dolor sit amet

consectetur adipiscing elit quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", "links": [ { - "url": "https://example.com", - "text": "", + "url": "#", + "text": "Link", "theme": "normal", "arrow": true - } - ], - "buttons": [ + }, + { + "url": "#1", + "text": "Link", + "theme": "normal", + "arrow": true + }, + { + "url": "#2", + "text": "Link", + "theme": "normal", + "arrow": true + }, { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" + "url": "#3", + "text": "Link", + "theme": "normal", + "arrow": true }, { - "text": "Button", - "theme": "outlined", - "url": "https://example.com" + "url": "https://example.com", + "text": "Back link", + "theme": "back", + "arrow": true } ] } @@ -505,48 +169,7 @@ "contactButtonTitle": "Contact us", "getStartedButtonTitle": "Get Started", "content": { - "type": "content-layout-block", - "properties": { - "size": "s" - }, - "textContent": { - "text": "

Lorem ipsum

dolor sit amet

consectetur adipiscing elit quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "additionalInfo": "

Duis aute irure dolor in reprehenderitn voluptate velit esse cillum dolore eu fugiat nulla pariatur.

", - "links": [ - { - "url": "https://example.com", - "text": "", - "theme": "normal", - "arrow": true - } - ] - }, - "fileContent": [ - { - "href": "https://example.xls", - "text": "File xls" - }, - { - "href": "https://example.fig", - "text": "PNG, JPG, and SVG format" - }, - { - "href": "https://example.pdf", - "text": "PDF file" - }, - { - "href": "https://example.zip", - "text": "Archive file" - }, - { - "href": "https://example.doc", - "text": "Microsoft Word document" - }, - { - "href": "https://example.ppt", - "text": "PPT file" - } - ] + "type": "content-layout-block" } } } diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss index 3232915dc..4b0dcb634 100644 --- a/src/sub-blocks/Content/Content.scss +++ b/src/sub-blocks/Content/Content.scss @@ -36,11 +36,6 @@ $darkSecondary: var(--yc-color-text-dark-secondary); .yfm a { @include content-link($secondary, $primary); } - - ol, - ul { - padding-left: 25px; - } } } @@ -65,6 +60,14 @@ $darkSecondary: var(--yc-color-text-dark-secondary); justify-content: center; } } + + #{$block}__notice, + #{$block}__text { + .yfm ul, + .yfm ol { + text-align: left; + } + } } &_size { @@ -101,8 +104,7 @@ $darkSecondary: var(--yc-color-text-dark-secondary); } #{$block}__text .yfm, - #{$block}__notice .yfm, - #{$block}__notice .yfm > * { + #{$block}__notice .yfm { @extend %heading-margin-reset; @include text-size(body-3); } diff --git a/src/sub-blocks/Content/Content.tsx b/src/sub-blocks/Content/Content.tsx index 165f789e3..2e8251dd5 100644 --- a/src/sub-blocks/Content/Content.tsx +++ b/src/sub-blocks/Content/Content.tsx @@ -66,14 +66,21 @@ const Content = (props: ContentBlockProps & ClassNameProps) => { {title && } {text && ( <div className={b('text', {['without-title']: !hasTitle})}> - <YFMWrapper content={text} modifiers={{constructor: true}} /> + <YFMWrapper + content={text} + modifiers={{constructor: true, [`constructor-size-${size}`]: true}} + /> </div> )} {additionalInfo && ( <div className={b('notice')}> <YFMWrapper content={additionalInfo} - modifiers={{constructor: true, 'constructor-notice': true}} + modifiers={{ + constructor: true, + 'constructor-notice': true, + [`constructor-size-${size}`]: true, + }} /> </div> )} diff --git a/src/sub-blocks/Content/__stories__/Content.stories.tsx b/src/sub-blocks/Content/__stories__/Content.stories.tsx index 9c8351832..0e6537912 100644 --- a/src/sub-blocks/Content/__stories__/Content.stories.tsx +++ b/src/sub-blocks/Content/__stories__/Content.stories.tsx @@ -1,5 +1,6 @@ import {Meta, Story} from '@storybook/react/types-6-0'; import React from 'react'; +import yfm from '@doc-tools/transform'; import Content from '../Content'; import {ContentBlockProps, ClassNameProps} from '../../../models'; @@ -20,8 +21,34 @@ export const Centered = DefaultTemplate.bind({}); export const Light = DefaultTemplate.bind({}); export const Dark = DefaultTemplate.bind({}); -Default.args = data.default.content as ContentBlockProps; -SizeS.args = data.sizeS.content as ContentBlockProps; -Centered.args = data.centered.content as ContentBlockProps; -Light.args = data.light.content as ContentBlockProps; -Dark.args = data.dark.content as ContentBlockProps; +const defaultArgs = { + title: data.default.content.title, + text: yfm(data.default.content.text).result.html, + additionalInfo: yfm(data.default.content.additionalInfo).result.html, + links: data.default.content.links, + buttons: data.default.content.buttons, +}; + +Default.args = { + ...defaultArgs, +} as ContentBlockProps; + +SizeS.args = { + ...defaultArgs, + ...data.sizeS.content, +} as ContentBlockProps; + +Centered.args = { + ...defaultArgs, + ...data.centered.content, +} as ContentBlockProps; + +Light.args = { + ...defaultArgs, + ...data.light.content, +} as ContentBlockProps; + +Dark.args = { + ...defaultArgs, + ...data.dark.content, +} as ContentBlockProps; diff --git a/src/sub-blocks/Content/__stories__/data.json b/src/sub-blocks/Content/__stories__/data.json index 0f45f0dc0..da5ca380e 100644 --- a/src/sub-blocks/Content/__stories__/data.json +++ b/src/sub-blocks/Content/__stories__/data.json @@ -1,37 +1,14 @@ { "centered": { "content": { - "title": "Lorem ipsumt", - "centered": true, - "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ] + "centered": true } }, "default": { "content": { "title": "Lorem ipsumt", - "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", + "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "links": [ { "url": "#", @@ -56,27 +33,16 @@ }, "light": { "content": { - "title": "Lorem ipsumt", "theme": "light", - "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], "buttons": [ { "text": "Button\r", - "theme": "action", + "theme": "monochrome", "url": "https://example.com" }, { "text": "Button", - "theme": "outlined", + "theme": "normal", "url": "#" } ] @@ -84,27 +50,16 @@ }, "dark": { "content": { - "title": "Lorem ipsumt", "theme": "dark", - "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], "buttons": [ { "text": "Button\r", - "theme": "action", + "theme": "normal-contrast", "url": "https://example.com" }, { "text": "Button", - "theme": "outlined", + "theme": "outlined-contrast", "url": "#" } ] @@ -112,30 +67,7 @@ }, "sizeS": { "content": { - "title": "Lorem ipsumt", - "size": "s", - "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "additionalInfo": "<p>Lorem ipsum dolor sit amet <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ", - "links": [ - { - "url": "#", - "text": "Link", - "theme": "normal", - "arrow": true - } - ], - "buttons": [ - { - "text": "Button\r", - "theme": "action", - "url": "https://example.com" - }, - { - "text": "Button", - "theme": "outlined", - "url": "#" - } - ] + "size": "s" } } } diff --git a/styles/yfm.scss b/styles/yfm.scss index c7f80ae59..61365c1ac 100644 --- a/styles/yfm.scss +++ b/styles/yfm.scss @@ -34,14 +34,25 @@ } } - p, - li { + ul, + ol, + li, + p { margin: 0 0 $indentXXS; } p strong { font-weight: 500; } + + &_size_s { + ul, + ol, + li, + p { + margin-bottom: $indentXXXS; + } + } } &_theme_dark { @@ -106,7 +117,8 @@ thead, tr { - background-color: transparent !important; /* stylelint-disable-line declaration-no-important */ + /* stylelint-disable declaration-no-important */ + background-color: transparent !important; } tbody tr { @@ -118,7 +130,7 @@ min-width: $columnWidth; width: $columnWidth; box-sizing: content-box; - white-space: inherit !important; /* stylelint-disable-line declaration-no-important */ + white-space: inherit !important; &:first-child { min-width: $firstColumnWidth; @@ -127,6 +139,7 @@ } th { - text-align: left !important; /* stylelint-disable-line declaration-no-important */ + text-align: left !important; } + /* stylelint-enable declaration-no-important */ }