Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
koskinpark committed Oct 25, 2022
1 parent 104b322 commit 1985c76
Show file tree
Hide file tree
Showing 38 changed files with 226 additions and 174 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
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
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
---
{
"defaultContent": {
Expand Down
48 changes: 37 additions & 11 deletions packages/kaizen-cg/_templates/component/new/component-script.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,60 @@
---
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
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
---
/**
* @file
* This is component script template.
*/
(({ behaviors }) => {
<% 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)) %> = {<% } %>
defaultEntry: () => {
return {
className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
};
},
customEntry: () => {
// If you need a custom entry (in case if for example in drupal
// you have other classnames than in components - you can create
// a new .js file in src/js folder, and put into it the following
// construction:
// (({ behaviors }) => {
// <% 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 = () => {<% } %>
// return [
// {
// ...your configuration,
// },
// ...etc
// ];
// };
// })(Drupal);
//
// Then, you have to attach compiled version of your newly created
// js file to drupal. Be sure you have attached it before original
// component's js file -> because only in this case component's
// js can catch your custom entry.
},
entries: () => {
return [
{
className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
},
];
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()<% } %>];
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()<% } %>) {
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()<% } %>);
}
return entries;
},
attach: (context) => {
<% 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) => {<% } %>
<% 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) => {<% } %>
once(
entry.processingName,
`.${entry.className}`,
context,
).forEach((el) => {
<% 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);<% } %>
<% 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 });<% } %>
});
});
},
handler: (el, entry) => {
handler: (obj) => {
// eslint-disable-next-line no-console
console.log(el, entry);
console.log(obj.el);
},
};
})(Drupal);
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
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
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
---
.<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %> {
display: inherit;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
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
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
---
<div {{ attributes }}>
<div {{ attributes.addClass('<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>') }}>
{{- defaultContent.content -}}
</div>
12 changes: 7 additions & 5 deletions packages/kaizen-cg/_templates/component/new/component.stories.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
---
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
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
---
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css';
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
import drupalAttribute from 'drupal-attribute';
import { useEffect } from '@storybook/client-api';

const template = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig');
const data = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json');

export default {
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.sentenceCase(name) %>',
parameters: {
// Uncomment next line if you need fullscreen mode
// layout: 'fullscreen',
Expand All @@ -24,9 +23,8 @@ data.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath = window.<%= h.change
<% } else { %>
data.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath;
<% } %>
export const basic = (args = {}) => {
const basicRender = (args) => {
const attributes = new drupalAttribute();
attributes.addClass(['<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>']);
if (args.attributes) {
for (const [attrName, attrValue] of Object.entries(args.attributes)) {
if (attrName === 'class') {
Expand All @@ -46,3 +44,7 @@ export const basic = (args = {}) => {
}, [args]);
return template(data)
};

export const basic = (args = {}) => {
return basicRender(args);
};
7 changes: 2 additions & 5 deletions packages/kaizen-core/_border-box.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
box-sizing: border-box;
}

html,
*,
*::before,
*::after {
box-sizing: inherit;
box-sizing: border-box;
}
132 changes: 75 additions & 57 deletions packages/kaizen-core/helpers/entity-fake-link/h-entity-fake-link.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,46 @@
* link wrapper around whole entity.
*/

const fakeLinkEvents = (el, e) => {
if (e.type === 'click' || e.key === 'Enter') {
const ref = e.target != null ? e.target : e.srcElement;
if (ref && ref.tagName !== 'A') {
window.open(el.getAttribute('data-href'), el.getAttribute('data-target'));
}
}
};

const fakeLinkProcessed = (el, link) => {
el.setAttribute('data-h-entity-fake-link-built', '');
el.setAttribute('tabindex', '0');
el.setAttribute('role', 'link');
el.setAttribute('data-href', link.getAttribute('href'));
el.setAttribute(
'aria-label',
link.hasAttribute('title')
? link.getAttribute('title')
: link.textContent.replace(/\s+/g, ' ').trim(),
);
el.setAttribute(
'data-target',
link.hasAttribute('target') ? link.getAttribute('target') : '_self',
);
Array.prototype.forEach.call(el.querySelectorAll('a'), (innerLink) => {
innerLink.setAttribute('tabindex', '-1');
});

el.addEventListener('click', (e) => {
fakeLinkEvents(el, e);
});

el.addEventListener('keydown', (e) => {
fakeLinkEvents(el, e);
});
};

(({ behaviors }) => {
behaviors.kaizen_core_h_entity_fake_link = {
attach: (context, settings) => {
const customConfig =
settings &&
settings.behaviors &&
settings.behaviors.kaizen_core_h_entity_fake_link &&
settings.behaviors.kaizen_core_h_entity_fake_link.entries
? settings.behaviors.kaizen_core_h_entity_fake_link.entries
: '';
const config = {
entries: [
{
wrapperData: '[data-h-entity-fake-link-container]',
targetData: '[data-h-entity-fake-link-target]',
},
...customConfig,
],
processingName: 'h-entity-fake-link',
defaultEntry: () => {
return {
wrapperData: '[data-h-entity-fake-link-container]',
targetData: '[data-h-entity-fake-link-target]',
processingName: 'storybook-a-button',
};
config.entries.forEach((entry) => {
once(config.processingName, entry.wrapperData, context).forEach(
},
customEntry: () => {
// If you need a custom entry (in case if for example in drupal
// you have other classnames than in components - you can create
// a new .js file in src/js folder, and put into it the following
// construction:
// (({ behaviors }) => {
// behaviors.kaizen_core_h_entity_fake_link.customEntry = () => {
// return [
// {
// ...your configuration,
// },
// ...etc
// ];
// };
// })(Drupal);
//
// Then, you have to attach compiled version of your newly created
// js file to drupal. Be sure you have attached it before original
// component's js file -> because only in this case component's
// js can catch your custom entry.
},
entries: () => {
let entries = [behaviors.kaizen_core_h_entity_fake_link.defaultEntry()];
if (behaviors.kaizen_core_h_entity_fake_link.customEntry()) {
entries.push(...behaviors.kaizen_core_h_entity_fake_link.customEntry());
}
return entries;
},
attach: (context) => {
behaviors.kaizen_core_h_entity_fake_link.entries().forEach((entry) => {
once(entry.processingName, `${entry.wrapperData}`, context).forEach(
(el) => {
// Multiple links inside of element you want to wrap is not expected
// with this script. So it searches only the first matched.
Expand All @@ -73,11 +54,48 @@ const fakeLinkProcessed = (el, link) => {
link = el.querySelector('a[href]');
}
if (link) {
fakeLinkProcessed(el, link);
behaviors.kaizen_core_h_entity_fake_link.handler({ el, link });
}
},
);
});
},
handler: (obj) => {
const { el } = obj;
const { link } = obj;
el.setAttribute('data-h-entity-fake-link-built', '');
el.setAttribute('tabindex', '0');
el.setAttribute('role', 'link');
el.setAttribute('data-href', link.getAttribute('href'));
el.setAttribute(
'aria-label',
link.hasAttribute('title')
? link.getAttribute('title')
: link.textContent.replace(/\s+/g, ' ').trim(),
);
el.setAttribute(
'data-target',
link.hasAttribute('target') ? link.getAttribute('target') : '_self',
);
Array.prototype.forEach.call(el.querySelectorAll('a'), (innerLink) => {
innerLink.setAttribute('tabindex', '-1');
});

el.addEventListener('click', (e) => {
behaviors.kaizen_core_h_entity_fake_link.fakeLinkEvents({ el, e });
});

el.addEventListener('keydown', (e) => {
behaviors.kaizen_core_h_entity_fake_link.fakeLinkEvents({ el, e });
});
},
fakeLinkEvents: (obj) => {
if (obj.e.type === 'click' || obj.e.key === 'Enter') {
const ref = obj.e.target != null ? obj.e.target : obj.e.srcElement;
if (ref && ref.tagName !== 'A') {
window.open(obj.el.getAttribute('data-href'), obj.el.getAttribute('data-target'));
}
}
},
};
})(Drupal);
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import './entity-fake-link.css';
import './h-entity-fake-link.css';
import './h-entity-fake-link';
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import './focus-visible.css';
import './h-focus-visible.css';
import './h-focus-visible';
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/.gitignore
dist
node_modules
yarn-error.log
storybook-static
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
<!--
Put here anything you want to attach in <head>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import config from '../<%= h.changeCase.lower(name) %>.breakpoints.yml';
window.themeBreakpoints = config;

// Import sprite.
import svgSpritePath from '../dist/svg/sprite.svg';
import svgSpritePath from '../dist/assets/sprite.svg';
window.<%= h.changeCase.lower(name) %>SvgSpritePath = svgSpritePath;

// Extend Twig.js with drupal filters.
Expand Down
24 changes: 0 additions & 24 deletions packages/kaizen-tg/_templates/drupal-9-theme/new/Makefile

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/assets/README.txt
---
Place your fonts here.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/images/svg/test.svg
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/assets/images/svg/test.svg
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M23.334 11.96c-.713-.726-.872-1.829-.393-2.727.342-.64.366-1.401.064-2.062-.301-.66-.893-1.142-1.601-1.302-.991-.225-1.722-1.067-1.803-2.081-.059-.723-.451-1.378-1.062-1.77-.609-.393-1.367-.478-2.05-.229-.956.347-2.026.032-2.642-.776-.44-.576-1.124-.915-1.85-.915-.725 0-1.409.339-1.849.915-.613.809-1.683 1.124-2.639.777-.682-.248-1.44-.163-2.05.229-.61.392-1.003 1.047-1.061 1.77-.082 1.014-.812 1.857-1.803 2.081-.708.16-1.3.642-1.601 1.302s-.277 1.422.065 2.061c.479.897.32 2.001-.392 2.727-.509.517-.747 1.242-.644 1.96s.536 1.347 1.17 1.7c.888.495 1.352 1.51 1.144 2.505-.147.71.044 1.448.519 1.996.476.549 1.18.844 1.902.798 1.016-.063 1.953.54 2.317 1.489.259.678.82 1.195 1.517 1.399.695.204 1.447.072 2.031-.357.819-.603 1.936-.603 2.754 0 .584.43 1.336.562 2.031.357.697-.204 1.258-.722 1.518-1.399.363-.949 1.301-1.553 2.316-1.489.724.046 1.427-.249 1.902-.798.475-.548.667-1.286.519-1.996-.207-.995.256-2.01 1.145-2.505.633-.354 1.065-.982 1.169-1.7s-.135-1.443-.643-1.96zm-12.584 5.43l-4.5-4.364 1.857-1.857 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.642z"/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/packages/components/_colors.css
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/components/_colors.css
---
/* Functional colors */

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/packages/components/_typography.css
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/components/_root.css
---
html {
font-size: var(--root-font-size);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/components/_typography.css
---
/* ---------- Connect your fonts here ----------- */
Loading

0 comments on commit 1985c76

Please sign in to comment.