Skip to content

Commit 8579b48

Browse files
koskinparkkoskinpark
committed
Updates
1 parent 104b322 commit 8579b48

36 files changed

+216
-173
lines changed

‎packages/kaizen-cg/_templates/component/new/component-data.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json
2+
to: <%= h.src() %>/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json
33
---
44
{
55
"defaultContent": {

‎packages/kaizen-cg/_templates/component/new/component-script.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,60 @@
11
---
2-
to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js
2+
to: <%= h.src() %>/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js
33
---
44
/**
55
* @file
66
* This is component script template.
77
*/
88
(({ behaviors }) => {
99
<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> = {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> = {<% } %>
10+
defaultEntry: () => {
11+
return {
12+
className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
13+
processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
14+
};
15+
},
16+
customEntry: () => {
17+
// If you need a custom entry (in case if for example in drupal
18+
// you have other classnames than in components - you can create
19+
// a new .js file in src/js folder, and put into it the following
20+
// construction:
21+
// (({ behaviors }) => {
22+
// <% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry = () => {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry = () => {<% } %>
23+
// return [
24+
// {
25+
// ...your configuration,
26+
// },
27+
// ...etc
28+
// ];
29+
// };
30+
// })(Drupal);
31+
//
32+
// Then, you have to attach compiled version of your newly created
33+
// js file to drupal. Be sure you have attached it before original
34+
// component's js file -> because only in this case component's
35+
// js can catch your custom entry.
36+
},
1037
entries: () => {
11-
return [
12-
{
13-
className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
14-
processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
15-
},
16-
];
38+
let entries = [<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.defaultEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.defaultEntry()<% } %>];
39+
if (<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } %>) {
40+
entries.push(...<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } %>);
41+
}
42+
return entries;
1743
},
1844
attach: (context) => {
19-
<% if (typeof themeName != 'undefined') { %>Drupal.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } %>
45+
<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } %>
2046
once(
2147
entry.processingName,
2248
`.${entry.className}`,
2349
context,
2450
).forEach((el) => {
25-
<% if (typeof themeName != 'undefined') { %>Drupal.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler(el, entry);<% } else { %>Drupal.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler(el, entry);<% } %>
51+
<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler({ el, entry });<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler({ el, entry });<% } %>
2652
});
2753
});
2854
},
29-
handler: (el, entry) => {
55+
handler: (obj) => {
3056
// eslint-disable-next-line no-console
31-
console.log(el, entry);
57+
console.log(obj.el);
3258
},
3359
};
3460
})(Drupal);

‎packages/kaizen-cg/_templates/component/new/component-source.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css
2+
to: <%= h.src() %>/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css
33
---
44
.<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %> {
55
display: inherit;

‎packages/kaizen-cg/_templates/component/new/component-template.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig
2+
to: <%= h.src() %>/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig
33
---
4-
<div {{ attributes }}>
4+
<div {{ attributes.addClass('<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>') }}>
55
{{- defaultContent.content -}}
66
</div>

‎packages/kaizen-cg/_templates/component/new/component.stories.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
2-
to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.stories.js
2+
to: <%= h.src() %>/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.stories.js
33
---
44
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css';
55
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
66
import drupalAttribute from 'drupal-attribute';
77
import { useEffect } from '@storybook/client-api';
8-
98
const template = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig');
109
const data = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json');
1110

1211
export default {
13-
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
12+
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.sentenceCase(name) %>',
1413
parameters: {
1514
// Uncomment next line if you need fullscreen mode
1615
// layout: 'fullscreen',
@@ -24,9 +23,8 @@ data.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath = window.<%= h.change
2423
<% } else { %>
2524
data.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath;
2625
<% } %>
27-
export const basic = (args = {}) => {
26+
const basicRender = (args) => {
2827
const attributes = new drupalAttribute();
29-
attributes.addClass(['<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>']);
3028
if (args.attributes) {
3129
for (const [attrName, attrValue] of Object.entries(args.attributes)) {
3230
if (attrName === 'class') {
@@ -46,3 +44,7 @@ export const basic = (args = {}) => {
4644
}, [args]);
4745
return template(data)
4846
};
47+
48+
export const basic = (args = {}) => {
49+
return basicRender(args);
50+
};

‎packages/kaizen-core/_border-box.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
2-
html {
3-
box-sizing: border-box;
4-
}
5-
2+
html,
63
*,
74
*::before,
85
*::after {
9-
box-sizing: inherit;
6+
box-sizing: border-box;
107
}

‎packages/kaizen-core/helpers/entity-fake-link/entity-fake-link.css‎ renamed to ‎packages/kaizen-core/helpers/entity-fake-link/h-entity-fake-link.css‎

File renamed without changes.

‎packages/kaizen-core/helpers/entity-fake-link/h-entity-fake-link.js‎

Lines changed: 75 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,65 +4,46 @@
44
* link wrapper around whole entity.
55
*/
66

7-
const fakeLinkEvents = (el, e) => {
8-
if (e.type === 'click' || e.key === 'Enter') {
9-
const ref = e.target != null ? e.target : e.srcElement;
10-
if (ref && ref.tagName !== 'A') {
11-
window.open(el.getAttribute('data-href'), el.getAttribute('data-target'));
12-
}
13-
}
14-
};
15-
16-
const fakeLinkProcessed = (el, link) => {
17-
el.setAttribute('data-h-entity-fake-link-built', '');
18-
el.setAttribute('tabindex', '0');
19-
el.setAttribute('role', 'link');
20-
el.setAttribute('data-href', link.getAttribute('href'));
21-
el.setAttribute(
22-
'aria-label',
23-
link.hasAttribute('title')
24-
? link.getAttribute('title')
25-
: link.textContent.replace(/\s+/g, ' ').trim(),
26-
);
27-
el.setAttribute(
28-
'data-target',
29-
link.hasAttribute('target') ? link.getAttribute('target') : '_self',
30-
);
31-
Array.prototype.forEach.call(el.querySelectorAll('a'), (innerLink) => {
32-
innerLink.setAttribute('tabindex', '-1');
33-
});
34-
35-
el.addEventListener('click', (e) => {
36-
fakeLinkEvents(el, e);
37-
});
38-
39-
el.addEventListener('keydown', (e) => {
40-
fakeLinkEvents(el, e);
41-
});
42-
};
43-
447
(({ behaviors }) => {
458
behaviors.kaizen_core_h_entity_fake_link = {
46-
attach: (context, settings) => {
47-
const customConfig =
48-
settings &&
49-
settings.behaviors &&
50-
settings.behaviors.kaizen_core_h_entity_fake_link &&
51-
settings.behaviors.kaizen_core_h_entity_fake_link.entries
52-
? settings.behaviors.kaizen_core_h_entity_fake_link.entries
53-
: '';
54-
const config = {
55-
entries: [
56-
{
57-
wrapperData: '[data-h-entity-fake-link-container]',
58-
targetData: '[data-h-entity-fake-link-target]',
59-
},
60-
...customConfig,
61-
],
62-
processingName: 'h-entity-fake-link',
9+
defaultEntry: () => {
10+
return {
11+
wrapperData: '[data-h-entity-fake-link-container]',
12+
targetData: '[data-h-entity-fake-link-target]',
13+
processingName: 'storybook-a-button',
6314
};
64-
config.entries.forEach((entry) => {
65-
once(config.processingName, entry.wrapperData, context).forEach(
15+
},
16+
customEntry: () => {
17+
// If you need a custom entry (in case if for example in drupal
18+
// you have other classnames than in components - you can create
19+
// a new .js file in src/js folder, and put into it the following
20+
// construction:
21+
// (({ behaviors }) => {
22+
// behaviors.kaizen_core_h_entity_fake_link.customEntry = () => {
23+
// return [
24+
// {
25+
// ...your configuration,
26+
// },
27+
// ...etc
28+
// ];
29+
// };
30+
// })(Drupal);
31+
//
32+
// Then, you have to attach compiled version of your newly created
33+
// js file to drupal. Be sure you have attached it before original
34+
// component's js file -> because only in this case component's
35+
// js can catch your custom entry.
36+
},
37+
entries: () => {
38+
let entries = [behaviors.kaizen_core_h_entity_fake_link.defaultEntry()];
39+
if (behaviors.kaizen_core_h_entity_fake_link.customEntry()) {
40+
entries.push(...behaviors.kaizen_core_h_entity_fake_link.customEntry());
41+
}
42+
return entries;
43+
},
44+
attach: (context) => {
45+
behaviors.kaizen_core_h_entity_fake_link.entries().forEach((entry) => {
46+
once(entry.processingName, `${entry.wrapperData}`, context).forEach(
6647
(el) => {
6748
// Multiple links inside of element you want to wrap is not expected
6849
// with this script. So it searches only the first matched.
@@ -73,11 +54,48 @@ const fakeLinkProcessed = (el, link) => {
7354
link = el.querySelector('a[href]');
7455
}
7556
if (link) {
76-
fakeLinkProcessed(el, link);
57+
behaviors.kaizen_core_h_entity_fake_link.handler({ el, link });
7758
}
7859
},
7960
);
8061
});
8162
},
63+
handler: (obj) => {
64+
const { el } = obj;
65+
const { link } = obj;
66+
el.setAttribute('data-h-entity-fake-link-built', '');
67+
el.setAttribute('tabindex', '0');
68+
el.setAttribute('role', 'link');
69+
el.setAttribute('data-href', link.getAttribute('href'));
70+
el.setAttribute(
71+
'aria-label',
72+
link.hasAttribute('title')
73+
? link.getAttribute('title')
74+
: link.textContent.replace(/\s+/g, ' ').trim(),
75+
);
76+
el.setAttribute(
77+
'data-target',
78+
link.hasAttribute('target') ? link.getAttribute('target') : '_self',
79+
);
80+
Array.prototype.forEach.call(el.querySelectorAll('a'), (innerLink) => {
81+
innerLink.setAttribute('tabindex', '-1');
82+
});
83+
84+
el.addEventListener('click', (e) => {
85+
behaviors.kaizen_core_h_entity_fake_link.fakeLinkEvents({ el, e });
86+
});
87+
88+
el.addEventListener('keydown', (e) => {
89+
behaviors.kaizen_core_h_entity_fake_link.fakeLinkEvents({ el, e });
90+
});
91+
},
92+
fakeLinkEvents: (obj) => {
93+
if (e.type === 'click' || e.key === 'Enter') {
94+
const ref = e.target != null ? e.target : e.srcElement;
95+
if (ref && ref.tagName !== 'A') {
96+
window.open(obj.el.getAttribute('data-href'), obj.el.getAttribute('data-target'));
97+
}
98+
}
99+
},
82100
};
83101
})(Drupal);

‎packages/kaizen-core/helpers/entity-fake-link/h-entity-fake-link.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
import './entity-fake-link.css';
1+
import './h-entity-fake-link.css';
22
import './h-entity-fake-link';

‎packages/kaizen-core/helpers/focus-visible/focus-visible.css‎ renamed to ‎packages/kaizen-core/helpers/focus-visible/h-focus-visible.css‎

File renamed without changes.

0 commit comments

Comments
 (0)