Skip to content
Snippets Groups Projects
Commit 9124bccd authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Fixed the Rich text block SDC component

parent 55d7a97e
No related branches found
No related tags found
No related merge requests found
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Block CTA
name: Block Rich Text
status: BETA
componentType: organism
description: CTA component description.
description: Block Rich Text description.
props:
type: object
required:
- content
properties:
cta_width:
type: string
title: CTA width
enum:
- w-25
- w-50
- w-75
- w-100
bg_color:
type: string
title: CTA background color
enum:
- primary
- secondary
- success
- danger
- warning
- info
- dark
- light
- white
cta_color:
type: string
title: CTA text color
enum:
- primary
- secondary
- success
- danger
- warning
- info
- dark
- light
- white
border_radius:
type: string
title: CTA border radius
enum:
- 0
- 1
- 2
- 3
- 4
- 5
title_tag:
type: string
title: HTML title tag
......@@ -69,19 +25,3 @@ props:
content:
type: string
title: content
button_content:
type: string
title: Button Content
button_color:
type: string
title: Button color
enum:
- primary
- secondary
- success
- danger
- warning
- info
- dark
- light
- white
title: "Organisms/Blocks"
description:
component: "CTA component description."
## Canvas height
height: 150
## CTA width settings
width:
description: Bootstrap class
table:
category: settings
default: 'w-50'
options:
'25%': 'w-25'
'50%': 'w-50'
'75%': 'w-75'
'100%': 'w-100'
## CTA background color
bg_color:
description: Bootstrap class
table:
category: settings
default: 'white'
options:
'Primary': 'primary'
'Secondary': 'secondary'
'Success': 'success'
'Danger': 'danger'
'Warning': 'warning'
'Info': 'info'
'Dark': 'dark'
'Light': 'light'
'White': 'white'
## CTA background color
text_color:
description: Bootstrap class
table:
category: settings
default: 'dark'
options:
'Primary': 'primary'
'Secondary': 'secondary'
'Success': 'success'
'Danger': 'danger'
'Warning': 'warning'
'Info': 'info'
'Dark': 'dark'
'Light': 'light'
'White': 'white'
## CTA background color
border_radius:
description: Bootstrap class
table:
category: settings
default: '0'
options:
'0': '0'
'1': '1'
'2': '2'
'3': '3'
'4': '4'
'5': '5'
## Title tag settings
title_tag:
description: 'HTML tag'
table:
category: 'settings'
default: 'h2'
options:
'H1': 'h1'
'H2': 'h2'
'H3': 'h3'
'H4': 'h4'
'H5': 'h5'
'H6': 'h6'
## Heading settings.
heading:
description: string
default: 'string'
table:
category: fields
## Content settings.
content:
description: string
default: 'string'
table:
category: fields
\ No newline at end of file
import config from './richText.config.yml';
import richText from './richText.twig';
import twigCode from '!!raw-loader!./richText.twig';
import DrupalAttribute from 'drupal-attribute';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: richText,
options: { showPanel: true },
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
title_tag: {
control: { type: "select" },
options: config.title_tag.options,
description: config.title_tag.description,
defaultValue: {summary: config.title_tag.default},
table: config.title_tag.table,
},
heading: {
content: { control: 'text' },
description: config.heading.description,
defaultValue: {summary: config.heading.default},
table: config.heading.table,
},
content: {
content: { control: 'text' },
description: config.content.description,
defaultValue: {summary: config.content.default},
table: config.content.table,
},
width: {
control: { type: "select" },
options: config.width.options,
description: config.width.description,
defaultValue: {summary: config.width.default},
table: config.width.table,
},
bg_color: {
control: { type: "select" },
options: config.bg_color.options,
description: config.bg_color.description,
defaultValue: {summary: config.bg_color.default},
table: config.bg_color.table,
},
text_color: {
control: { type: "select" },
options: config.text_color.options,
description: config.text_color.description,
defaultValue: {summary: config.text_color.default},
table: config.text_color.table,
},
border_radius: {
control: { type: "select" },
options: config.border_radius.options,
description: config.border_radius.description,
defaultValue: {summary: config.border_radius.default},
table: config.border_radius.table,
},
},
};
export const RichText = (args) => {
return (
richText({
attributes: new DrupalAttribute(),
heading_attributes: new DrupalAttribute(),
tag: 'div',
title_tag: args.title_tag ? args.title_tag : 'h2',
heading: args.heading ? args.heading : '',
content: args.content ? args.content : '',
width: args.width ? args.width : 'w-50',
bg_color: args.bg_color ? args.bg_color : 'white',
text_color: args.cta_color ? args.cta_color : 'dark',
border_radius: args.border_radius ? args.border_radius : '0',
...args
})
)
}
RichText.args = {
title_tag: 'h2',
heading: 'Rich Title',
content: 'Morbi magna ex, volutpat sit amet erat vitae, dictum bibendum massa. Vivamus interdum accumsan luctus. Curabitur dignissim efficitur ex, in posuere lacus molestie sit amet. Aenean semper euismod sollicitudin. Integer vitae ultricies erat. Morbi fringilla lorem at pretium suscipit. Duis turpis mi, porta eu leo nec, consectetur accumsan lectus. Quisque dapibus, enim ut vulputate ornare, diam nibh rhoncus est, sit amet pellentesque risus ante in neque. Phasellus eu fermentum elit, vitae imperdiet tellus. Vivamus molestie ultricies metus, in tristique sem venenatis quis. Vestibulum viverra nisi nec lorem ultrices, ut luctus ex rutrum. Proin eget magna leo.',
width: 'w-50',
bg_color: 'white',
text_color: 'dark',
border_radius: '0',
};
......@@ -9,6 +9,8 @@
border_radius ? 'rounded-' ~ border_radius : ''
] %}
{% set html_tag = html_tag ?? 'div' %}
<{{ html_tag }} {{ attributes.addClass(classes) }}>
{% if heading %}
{% include "varbase_components:heading" with {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment