Skip to content

Commit 885f3b5

Browse files
tiberiuichimavoineatisto
authored
Add Style component and AlignWidget (#1816)
* Add Style and AlignWidget * Register the align widget * Fix widget classname * Extract i18n messages * yarn i18n * Simplify AlignWidget, get rid of code already in FormFieldWrapper * Cosmetics * yarn i18n * Update CHANGELOG.md Co-authored-by: Alin Voinea <[email protected]> Co-authored-by: Timo Stollenwerk <[email protected]> Co-authored-by: Timo Stollenwerk <[email protected]>
1 parent 62cf500 commit 885f3b5

File tree

10 files changed

+269
-1
lines changed

10 files changed

+269
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66

77
### Feature
88

9+
- Add `Style`, a wrapper component that applies float and width classes to wrapped content (typically blocks) @tiberiuichim
10+
- Add `AlignWidget`, a widget that wraps the `AlignBlock` helper @tiberiuichim
11+
912
### Bugfix
1013

1114
- Fixed edit link in draft-js when link is selected from word-end to word-start @giuliaghisini

‎locales/volto.pot‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
msgid ""
22
msgstr ""
33
"Project-Id-Version: Plone\n"
4-
"POT-Creation-Date: 2020-09-25T19:29:57.494Z\n"
4+
"POT-Creation-Date: 2020-10-13T09:58:31.078Z\n"
55
"Last-Translator: Plone i18n <[email protected]>\n"
66
"Language-Team: Plone i18n <[email protected]>\n"
77
"MIME-Version: 1.0\n"

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ export MapsSidebar from '@plone/volto/components/manage/Blocks/Maps/MapsSidebar'
170170
export VideoSidebar from '@plone/volto/components/manage/Blocks/Video/VideoSidebar';
171171
export LeadImageSidebar from '@plone/volto/components/manage/Blocks/LeadImage/LeadImageSidebar';
172172

173+
export Style from '@plone/volto/components/manage/Blocks/Block/Style';
173174
export BlockSettingsSidebar from '@plone/volto/components/manage/Blocks/Block/Settings';
174175
export BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
175176
export TextSettingsSchema from '@plone/volto/components/manage/Blocks/Text/Schema';

‎src/components/manage/Blocks/Block/Style.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import cx from 'classnames';
3+
4+
export default ({ data, detached, children }) => {
5+
return (
6+
<div
7+
className={cx(
8+
`${data['@type'] ? `${data['@type']} block` : ''} align`,
9+
{
10+
center: !Boolean(data.align),
11+
detached,
12+
},
13+
data.align,
14+
)}
15+
>
16+
<div
17+
className={cx({
18+
'full-width': data.align === 'full',
19+
large: data.size === 'l',
20+
medium: data.size === 'm',
21+
small: data.size === 's',
22+
})}
23+
>
24+
{children}
25+
</div>
26+
</div>
27+
);
28+
};

‎src/components/manage/Blocks/Block/Style.test.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
4+
import Style from './Style';
5+
6+
test('renders a Style wrapper component', () => {
7+
const component = renderer.create(
8+
<Style
9+
data={{ url: 'image', alt: 'alternate text', align: 'full', size: 'l' }}
10+
block="1234"
11+
pathname="/news"
12+
onChangeBlock={() => {}}
13+
openObjectBrowser={() => {}}
14+
resetSubmitUrl={() => {}}
15+
>
16+
Hello world
17+
</Style>,
18+
);
19+
const json = component.toJSON();
20+
expect(json).toMatchSnapshot();
21+
});

‎src/components/manage/Blocks/Block/__snapshots__/Style.test.jsx.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders a Style wrapper component 1`] = `
4+
<div
5+
className=" align full"
6+
>
7+
<div
8+
className="full-width large"
9+
>
10+
Hello world
11+
</div>
12+
</div>
13+
`;

‎src/components/manage/Widgets/AlignWidget.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* AlignWidget component.
3+
* To benefit from styling integration, use with a field named 'align'
4+
* @module components/manage/Widgets/AlignWidget
5+
*/
6+
7+
import React from 'react';
8+
import { injectIntl } from 'react-intl';
9+
10+
import { FormFieldWrapper } from '@plone/volto/components';
11+
import { AlignBlock } from '@plone/volto/helpers';
12+
13+
const AlignWidget = (props) => {
14+
const { id, onChange, value } = props;
15+
return (
16+
<FormFieldWrapper {...props} className="align-widget">
17+
<AlignBlock
18+
align={value}
19+
onChangeBlock={(block, { align }) => onChange(id, align)}
20+
data={{ align: value }}
21+
block={id}
22+
/>
23+
</FormFieldWrapper>
24+
);
25+
};
26+
27+
export default injectIntl(AlignWidget);

‎src/components/manage/Widgets/AlignWidget.test.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import configureStore from 'redux-mock-store';
4+
import { Provider } from 'react-intl-redux';
5+
6+
import AlignWidget from './AlignWidget';
7+
8+
const mockStore = configureStore();
9+
10+
test('renders an align widget component', () => {
11+
const store = mockStore({
12+
intl: {
13+
locale: 'en',
14+
messages: {},
15+
},
16+
});
17+
18+
const component = renderer.create(
19+
<Provider store={store}>
20+
<AlignWidget id="align" title="Alignment" onChange={() => {}} />
21+
</Provider>,
22+
);
23+
const json = component.toJSON();
24+
expect(json).toMatchSnapshot();
25+
});

‎src/components/manage/Widgets/__snapshots__/AlignWidget.test.jsx.snap‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders an align widget component 1`] = `
4+
<div
5+
className="inline field align-widget"
6+
id="field-align"
7+
>
8+
<div
9+
className="ui grid"
10+
>
11+
<div
12+
className="stretched row"
13+
>
14+
<div
15+
className="four wide column"
16+
>
17+
<div
18+
className="wrapper"
19+
>
20+
<label
21+
htmlFor="field-align"
22+
>
23+
Alignment
24+
</label>
25+
</div>
26+
</div>
27+
<div
28+
className="eight wide column"
29+
>
30+
<div>
31+
<div
32+
className="ui buttons"
33+
>
34+
<button
35+
aria-label="Left"
36+
className="ui basic icon button"
37+
onClick={[Function]}
38+
>
39+
<svg
40+
className="icon"
41+
dangerouslySetInnerHTML={
42+
Object {
43+
"__html": undefined,
44+
}
45+
}
46+
onClick={null}
47+
style={
48+
Object {
49+
"fill": "currentColor",
50+
"height": "24px",
51+
"width": "auto",
52+
}
53+
}
54+
viewBox=""
55+
xmlns=""
56+
/>
57+
</button>
58+
</div>
59+
<div
60+
className="ui buttons"
61+
>
62+
<button
63+
aria-label="Right"
64+
className="ui basic icon button"
65+
onClick={[Function]}
66+
>
67+
<svg
68+
className="icon"
69+
dangerouslySetInnerHTML={
70+
Object {
71+
"__html": undefined,
72+
}
73+
}
74+
onClick={null}
75+
style={
76+
Object {
77+
"fill": "currentColor",
78+
"height": "24px",
79+
"width": "auto",
80+
}
81+
}
82+
viewBox=""
83+
xmlns=""
84+
/>
85+
</button>
86+
</div>
87+
<div
88+
className="ui buttons"
89+
>
90+
<button
91+
aria-label="Center"
92+
className="ui active basic icon button"
93+
onClick={[Function]}
94+
>
95+
<svg
96+
className="icon"
97+
dangerouslySetInnerHTML={
98+
Object {
99+
"__html": undefined,
100+
}
101+
}
102+
onClick={null}
103+
style={
104+
Object {
105+
"fill": "currentColor",
106+
"height": "24px",
107+
"width": "auto",
108+
}
109+
}
110+
viewBox=""
111+
xmlns=""
112+
/>
113+
</button>
114+
</div>
115+
<div
116+
className="ui buttons"
117+
>
118+
<button
119+
aria-label="Full"
120+
className="ui basic icon button"
121+
onClick={[Function]}
122+
>
123+
<svg
124+
className="icon"
125+
dangerouslySetInnerHTML={
126+
Object {
127+
"__html": undefined,
128+
}
129+
}
130+
onClick={null}
131+
style={
132+
Object {
133+
"fill": "currentColor",
134+
"height": "24px",
135+
"width": "auto",
136+
}
137+
}
138+
viewBox=""
139+
xmlns=""
140+
/>
141+
</button>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
`;

‎src/config/Widgets.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
import loadable from '@loadable/component';
55

6+
import AlignWidget from '@plone/volto/components/manage/Widgets/AlignWidget';
67
import ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
78
import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
89
import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
@@ -45,6 +46,7 @@ export const widgetMapping = {
4546
date: DatetimeWidget,
4647
password: PasswordWidget,
4748
file: FileWidget,
49+
align: AlignWidget,
4850
url: UrlWidget,
4951
email: EmailWidget,
5052
},

0 commit comments

Comments
 (0)