diff --git a/.commitlintrc.yml b/.commitlintrc.yml index b5669e87b..13705946e 100644 --- a/.commitlintrc.yml +++ b/.commitlintrc.yml @@ -38,6 +38,7 @@ rules: - esl-footnotes - esl-forms - esl-image + - esl-image-utils - esl-media - esl-media-query - esl-mixin-element diff --git a/README.md b/README.md index 48b10cde0..8531afd46 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,8 @@ with excellent performance. - ##### [ESL Alert](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-alert/README.md) - ##### [ESL Animate](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-animate/README.md) - ##### [ESL Footnotes](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-footnotes/README.md) (beta) -- ##### [ESL Image](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md) +- ##### [ESL Image Utils](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image-utils/README.md) +- ##### [ESL Image (Legacy)](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md) - ##### [ESL Media](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-media/README.md) - ##### [ESL Panel](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel/README.md) - ##### [ESL Panel Group](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel-group/README.md) diff --git a/e2e/tests/__image_snapshots__/homepage-feature-feature-homepage-looks-fine-test-homepage-footer-on-desktop-1-snap.png b/e2e/tests/__image_snapshots__/homepage-feature-feature-homepage-looks-fine-test-homepage-footer-on-desktop-1-snap.png index a2d7ccde0..7785476a8 100644 Binary files a/e2e/tests/__image_snapshots__/homepage-feature-feature-homepage-looks-fine-test-homepage-footer-on-desktop-1-snap.png and b/e2e/tests/__image_snapshots__/homepage-feature-feature-homepage-looks-fine-test-homepage-footer-on-desktop-1-snap.png differ diff --git a/site/11ty/markdown.img.lib.js b/site/11ty/markdown.img.lib.js index dea9398a0..b563f5f77 100644 --- a/site/11ty/markdown.img.lib.js +++ b/site/11ty/markdown.img.lib.js @@ -14,8 +14,8 @@ const extractAttrs = (token) => { const renderImage = (attrs) => { const {src, alt, width, height} = attrs; const style = width * height ? `aspect-ratio: ${width} / ${height};` : ''; - return `
- + return `
+ ${alt}
`; }; diff --git a/site/site.yml b/site/site.yml index 659ff8278..49c3f6a05 100644 --- a/site/site.yml +++ b/site/site.yml @@ -20,7 +20,14 @@ rewriteRules: "docs/INSTALLATION_GUIDE.md": "/introduction" "docs/BROWSER_SUPPORT.md": "/introduction/browser-support" "src/modules/esl-base-element/README.md": "/core/esl-base-element" + "src/modules/esl-mixin-element/README.md": "/core/esl-mixin-element" "src/modules/esl-media-query/README.md": "/core/esl-media-query" "src/modules/esl-traversing-query/README.md": "/core/esl-traversing-query" "src/modules/esl-trigger/README.md": "/components/esl-trigger" "src/modules/esl-toggleable/README.md": "/components/esl-toggleable" + "src/modules/esl-tab/README.md": "/components/esl-tab" + "src/modules/esl-panel/README.md": "/components/esl-panel" + "src/modules/esl-panel-group/README.md": "/components/esl-panel-group" + "src/modules/esl-image/README.md": "/components/esl-image" + "src/modules/esl-image-utils/README.md": "/components/esl-image-utils" + "src/modules/esl-carousel/README.md": "/components/esl-carousel" diff --git a/site/src/common/badge.less b/site/src/common/badge.less index 3c397bf85..562435d42 100644 --- a/site/src/common/badge.less +++ b/site/src/common/badge.less @@ -69,16 +69,26 @@ &-img { width: 20px; height: 20px; - } - &-playground { &::after { position: absolute; - content: ''; inset: 0; + background-size: contain; + background-repeat: no-repeat; background-position: center; + } + } + + &-playground { + &::after { + content: ''; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.1 11.7' fill='white' xml:space='preserve'%3E%3Cpath d='M2.8 5.9 6.7 2a1 1 0 0 0 0-1.6C6.2-.1 5.5-.1 5 .4L.7 4.6l-.2.3-.2.2a1 1 0 0 0 0 1.6L5 11.4c.5.4 1.2.4 1.6 0a1 1 0 0 0 0-1.6L2.8 5.9zM14.4 1.3l2 1.2L12 9.9l-2-1.1zM11.9 10.2 9.9 9l-.2 2.6zM14.8.6c.3-.5 1-.7 1.6-.4.6.3.7 1 .4 1.6l-.3.5-2-1.1.3-.6zM25.7 6.7l-.2.2-.2.3-4.3 4.2c-.5.4-1.2.4-1.6 0a1 1 0 0 1 0-1.6L23.3 6l-3.9-4a1 1 0 0 1 0-1.6c.5-.4 1.2-.4 1.6 0l4.7 4.7c.5.4.5 1.1 0 1.6z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; + } + } + &-deprecated { + &::after { + content: ''; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3ccircle cx='50' cy='50' r='45' fill='none' stroke='%236c757d' stroke-width='6'/%3e%3cpath fill='%236c757d' d='M20 45h60v10H20z'/%3e%3c/svg%3e"); } } diff --git a/site/src/common/card.less b/site/src/common/card.less index 87b5df4cb..247a1cc90 100644 --- a/site/src/common/card.less +++ b/site/src/common/card.less @@ -8,6 +8,9 @@ background: #fff; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3); + img { + pointer-events: none; + } &-image { flex: 0 0 auto; } diff --git a/site/src/common/markdown.less b/site/src/common/markdown.less index 994fde257..19a31d5fb 100644 --- a/site/src/common/markdown.less +++ b/site/src/common/markdown.less @@ -36,7 +36,8 @@ letter-spacing: 1px; } - &.no-margin { + &.no-margin, + .alert & { p:last-child { margin-block-end: 0; } diff --git a/site/src/localdev.ts b/site/src/localdev.ts index 02516555d..42a2ea84c 100644 --- a/site/src/localdev.ts +++ b/site/src/localdev.ts @@ -10,7 +10,7 @@ import './common/breakpoints'; import { ESLVSizeCSSProxy, - ESLImage, + ESLImageContainerMixin, ESLMedia, ESLToggleable, ESLPopup, @@ -84,7 +84,7 @@ ESLDemoPopupGame.register(); ESLRandomText.register('lorem-ipsum'); // Register ESL Components -ESLImage.register(); +ESLImageContainerMixin.register(); ESLMedia.register(); ESLToggleableDispatcher.init(); diff --git a/site/src/navigation/footer/footer.less b/site/src/navigation/footer/footer.less index 2d70a418c..abaef370c 100644 --- a/site/src/navigation/footer/footer.less +++ b/site/src/navigation/footer/footer.less @@ -94,7 +94,7 @@ display: flex; flex-direction: column; flex-wrap: wrap; - height: 330px; // 8 lines max (+2px) + max-height: 410px; // 10 lines max list-style-type: none; } } diff --git a/site/src/playground/export/lib.ts b/site/src/playground/export/lib.ts index 76edf6080..a0f5b29a3 100644 --- a/site/src/playground/export/lib.ts +++ b/site/src/playground/export/lib.ts @@ -1 +1,2 @@ +import '@exadel/esl/modules/lib'; export * from '@exadel/esl'; diff --git a/site/views/_includes/navigation/sidebar-item.njk b/site/views/_includes/navigation/sidebar-item.njk index 7c2d07ad9..471deae9d 100644 --- a/site/views/_includes/navigation/sidebar-item.njk +++ b/site/views/_includes/navigation/sidebar-item.njk @@ -42,6 +42,7 @@ {% set isDraft = [].concat(item.data.tags).includes('draft') %} {% set isNew = [].concat(item.data.tags).includes('new') %} {% set isBeta = [].concat(item.data.tags).includes('beta') %} + {% set isDeprecated = [].concat(item.data.tags).includes('deprecated') %} {% set isPlayground = [].concat(item.data.tags).includes('playground') %}
  • @@ -57,6 +58,9 @@ {% if isDraft %} draft {% endif %} + {% if isDeprecated %} + + {% endif %} {% if isPlayground %} {% endif %} diff --git a/site/views/_layouts/content.njk b/site/views/_layouts/content.njk index 6e88879b6..42e29ac50 100644 --- a/site/views/_layouts/content.njk +++ b/site/views/_layouts/content.njk @@ -21,6 +21,17 @@ {% endif %} {% if aside %}