-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'SLB-299-accordion' into dev
# Conflicts: # packages/drupal/gutenberg_blocks/src/index.ts # packages/schema/src/fragments/Page.gql # packages/schema/src/schema.graphql # packages/ui/src/components/Organisms/PageDisplay.tsx # pnpm-lock.yaml # tests/schema/specs/blocks.spec.ts
- Loading branch information
Showing
15 changed files
with
558 additions
and
17 deletions.
There are no files selected for viewing
51 changes: 51 additions & 0 deletions
51
.../gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionItemTextValidator.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<?php | ||
|
||
namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator; | ||
|
||
use Drupal\Core\StringTranslation\StringTranslationTrait; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorInterface; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorTrait; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase; | ||
|
||
/** | ||
* @GutenbergValidator( | ||
* id="accordion_item_text_validator", | ||
* label = @Translation("Accordion Item Text validator") | ||
* ) | ||
*/ | ||
class AccordionItemTextValidator extends GutenbergValidatorBase { | ||
use GutenbergCardinalityValidatorTrait; | ||
use StringTranslationTrait; | ||
|
||
/** | ||
* {@inheritDoc} | ||
*/ | ||
public function applies(array $block): bool { | ||
return $block['blockName'] === 'custom/accordion-item-text'; | ||
} | ||
|
||
/** | ||
* {@inheritDoc} | ||
*/ | ||
public function validatedFields($block = []): array { | ||
return [ | ||
'title' => [ | ||
'field_label' => $this->t('Title'), | ||
'rules' => ['required'], | ||
], | ||
]; | ||
} | ||
|
||
/** | ||
* {@inheritDoc} | ||
*/ | ||
public function validateContent($block = []): array { | ||
$expectedChildren = [ | ||
'validationType' => GutenbergCardinalityValidatorInterface::CARDINALITY_ANY, | ||
'min' => 1, | ||
'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED, | ||
]; | ||
return $this->validateCardinality($block, $expectedChildren); | ||
} | ||
|
||
} |
42 changes: 42 additions & 0 deletions
42
...s/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionValidator.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<?php | ||
|
||
namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator; | ||
|
||
use Drupal\Core\StringTranslation\StringTranslationTrait; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorInterface; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorTrait; | ||
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase; | ||
|
||
/** | ||
* @GutenbergValidator( | ||
* id="accordion_validator", | ||
* label = @Translation("Accordion validator") | ||
* ) | ||
*/ | ||
class AccordionValidator extends GutenbergValidatorBase { | ||
use GutenbergCardinalityValidatorTrait; | ||
use StringTranslationTrait; | ||
|
||
/** | ||
* {@inheritDoc} | ||
*/ | ||
public function applies(array $block): bool { | ||
return $block['blockName'] === 'custom/accordion'; | ||
} | ||
|
||
/** | ||
* {@inheritDoc} | ||
*/ | ||
public function validateContent($block = []): array { | ||
$expectedChildren = [ | ||
[ | ||
'blockName' => 'custom/accordion-item-text', | ||
'blockLabel' => $this->t('Accordion'), | ||
'min' => 1, | ||
'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED, | ||
], | ||
]; | ||
return $this->validateCardinality($block, $expectedChildren); | ||
} | ||
|
||
} |
85 changes: 85 additions & 0 deletions
85
packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import React, { Fragment } from 'react'; | ||
import { | ||
InnerBlocks, | ||
InspectorControls, | ||
RichText, | ||
} from 'wordpress__block-editor'; | ||
import { registerBlockType } from 'wordpress__blocks'; | ||
import { PanelBody, SelectControl } from 'wordpress__components'; | ||
import { compose, withState } from 'wordpress__compose'; | ||
|
||
// @ts-ignore | ||
const { t: __ } = Drupal; | ||
// @ts-ignore | ||
registerBlockType('custom/accordion-item-text', { | ||
title: 'Accordion Item Text', | ||
icon: 'text', | ||
category: 'layout', | ||
parent: ['custom/accordion'], | ||
attributes: { | ||
title: { | ||
type: 'string', | ||
}, | ||
icon: { | ||
type: 'string', | ||
}, | ||
}, | ||
// @ts-ignore | ||
edit: compose(withState())((props) => { | ||
const { attributes, setAttributes } = props; | ||
const icons = [ | ||
{ label: __('- Select an optional icon -'), value: '' }, | ||
{ label: __('Checkmark'), value: 'checkmark' }, | ||
{ label: __('Questionmark'), value: 'questionmark' }, | ||
{ label: __('Arrow'), value: 'arrow' }, | ||
]; | ||
setAttributes({ | ||
icon: attributes.icon === undefined ? '' : attributes.icon, | ||
}); | ||
|
||
return ( | ||
<Fragment> | ||
<InspectorControls> | ||
<PanelBody title={__('Block settings')}> | ||
<SelectControl | ||
value={attributes.icon} | ||
options={icons} | ||
onChange={(newValue) => { | ||
setAttributes({ | ||
icon: newValue, | ||
}); | ||
}} | ||
/> | ||
</PanelBody> | ||
</InspectorControls> | ||
<div className={'container-wrapper'}> | ||
<div className={'container-label'}>{__('Accordion Item Text')}</div> | ||
<div className="custom-block-accordion-item-text"> | ||
<RichText | ||
identifier="title" | ||
tagName="h3" | ||
value={attributes.title} | ||
allowedFormats={[]} | ||
// @ts-ignore | ||
disableLineBreaks={true} | ||
placeholder={__('Title')} | ||
keepPlaceholderOnFocus={true} | ||
onChange={(newValue) => { | ||
setAttributes({ title: newValue }); | ||
}} | ||
/> | ||
<InnerBlocks | ||
templateLock={false} | ||
allowedBlocks={['core/paragraph', 'core/list', 'core/heading']} | ||
template={[['core/paragraph', {}]]} | ||
/> | ||
</div> | ||
</div> | ||
</Fragment> | ||
); | ||
}), | ||
|
||
save: () => { | ||
return <InnerBlocks.Content />; | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { InnerBlocks } from 'wordpress__block-editor'; | ||
import { registerBlockType } from 'wordpress__blocks'; | ||
|
||
// @ts-ignore | ||
const { t: __ } = Drupal; | ||
|
||
registerBlockType('custom/accordion', { | ||
title: __('Accordion'), | ||
icon: 'menu', | ||
category: 'layout', | ||
attributes: {}, | ||
edit: () => { | ||
return ( | ||
<div className={'container-wrapper'}> | ||
<div className={'container-label'}>{__('Accordion')}</div> | ||
<InnerBlocks | ||
templateLock={false} | ||
allowedBlocks={['custom/accordion-item-text']} | ||
template={[['custom/accordion-item-text']]} | ||
/> | ||
</div> | ||
); | ||
}, | ||
save: () => <InnerBlocks.Content />, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
packages/schema/src/fragments/PageContent/BlockAccordion.gql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
fragment BlockAccordion on BlockAccordion { | ||
items { | ||
...BlockAccordionItemText | ||
} | ||
} | ||
|
||
fragment BlockAccordionItemText on BlockAccordionItemText { | ||
title | ||
icon | ||
textContent { | ||
markup | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { Markup } from '@custom/schema'; | ||
import { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { BlockAccordion } from './BlockAccordion'; | ||
|
||
export default { | ||
component: BlockAccordion, | ||
} satisfies Meta<typeof BlockAccordion>; | ||
|
||
export const AccordionItemText = { | ||
args: { | ||
items: [ | ||
{ | ||
title: 'Cheese Fondue', | ||
icon: '', | ||
textContent: { | ||
markup: ` | ||
<p>The earliest known recipe for the modern form of cheese fondue comes from a 1699 book published in Zürich, under the name "Käss mit Wein zu kochen" 'to cook cheese with wine'. It calls for grated or cut-up cheese to be melted with wine, and for bread to be dipped in it.</p> | ||
<ul> | ||
<li>Fribourgeoise</li> | ||
<li>Moitié-Moitié</li> | ||
</ul> | ||
` as Markup, | ||
}, | ||
}, | ||
{ | ||
title: 'Rösti', | ||
icon: 'questionmark', | ||
textContent: { | ||
markup: ` | ||
<p>Rösti is a kind of fried potato cake served as a main course or side dish.</p> | ||
<p> As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti. There are many variants in Switzerland and outside the borders. This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p> | ||
` as Markup, | ||
}, | ||
}, | ||
{ | ||
title: 'Älplermagronen', | ||
icon: 'checkmark', | ||
textContent: { | ||
markup: ` | ||
<p>Älplermagronen are now regarded as a traditional dish of the Swiss Alps and a classic of Swiss comfort foods. According to a popular theory, pasta became widespread in northern Switzerland in the late 19th century, when the Gotthard Tunnel was built, partly by Italian workers who brought dry pasta with them.</p> | ||
` as Markup, | ||
}, | ||
}, | ||
{ | ||
title: 'Meringue with double cream', | ||
icon: 'arrow', | ||
textContent: { | ||
markup: ` | ||
<p>The Oxford English Dictionary states that the French word is of unknown origin. The name meringue for this confection first appeared in print in François Massialot's cookbook of 1692.</p> | ||
` as Markup, | ||
}, | ||
}, | ||
], | ||
}, | ||
} satisfies StoryObj<typeof BlockAccordion>; |
Oops, something went wrong.