forked from adobecom/milo
-
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.
MWPW-119392 - Text block updates (adobecom#325)
* added Text util() * refact text init an css * default heading * update decorateButtons to include fill and loop in action area. * gap instead of link margin * text.body- * update Text.js bump bus * style updates * fixed text analytics ref and moved .md file into martec * shared utils * refactored data-con-block styles * style conflict w/ how-to, updated text block to handle inset variant * target spacing top / bottom * section grids * uneeded func * Feedback on design review * XS action area on small grid * grid 12 with offsets * Default con-btn: 15, text grid selector * some edge cases * fill row mobile * dialed semantic * branch to test grid * auto columns * grid span instead of offsets * auto offsets * auto offset with custom items * cleanup * cleanup * update to text block to support grid * handling auto cols * Cleaned up styles and removed comments * git ignore * simple up solution * add grid section metadata test * simplified selectors * cleanup * tests * random let that is never reassigned * semantic * dialed and final cleanup * icon block test * updated class names * some final updates * testing errors * add section gap tokens * ryans review items * new line in css * optimize grid widths css calc * remove calcs for speed and up selector on gaps * put calcs back because container width breakpoints * Update text grid and refined text block * updated decorateText block util to pass param, fixed issue w/ .content in section-meta, updated text styles, js * grid items start * text-block test coverage, cleaned up decorateButton, linted text.js * PR feedback. Fixed scope of actionArea on decorateButton Co-authored-by: thi64146 <[email protected]> Co-authored-by: Sartxi <[email protected]>
- Loading branch information
3 people
authored
Nov 18, 2022
1 parent
8c729a6
commit f5c5213
Showing
9 changed files
with
179 additions
and
160 deletions.
There are no files selected for viewing
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 |
|---|---|---|
|
|
@@ -4,3 +4,4 @@ logs/* | |
| node_modules/* | ||
| .DS_Store | ||
| .idea | ||
| .iml | ||
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
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 |
|---|---|---|
| @@ -1,41 +1,25 @@ | ||
| /* | ||
| * Copyright 2022 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import { decorateBlockBg, decorateBlockText } from '../../utils/decorate.js'; | ||
|
|
||
| /* | ||
| * Text Block - v1.0 | ||
| */ | ||
| import { decorateBlockBg, decorateBlockText, getBlockSize } from '../../utils/decorate.js'; | ||
| import { createTag } from '../../utils/utils.js'; | ||
|
|
||
| export default function init(el) { | ||
| el.classList.add('text-block'); | ||
| const children = el.querySelectorAll(':scope > div'); | ||
| const [background, ...cols] = children; | ||
| decorateBlockBg(el, background); | ||
|
|
||
| const container = document.createElement('div'); | ||
| container.classList.add('foreground', 'container', 'grid'); | ||
| el.appendChild(container); | ||
|
|
||
| cols.forEach((col, idx) => { | ||
| let headingClass = 'medium'; | ||
| if (idx === 0 && (el.classList.contains('full-width'))) { | ||
| col.children[0].classList.add('full-width'); | ||
| headingClass = el.classList.contains('large') ? 'large' : 'medium'; | ||
| } | ||
| col.children[0].classList.add('text'); | ||
| decorateBlockText(el, headingClass); | ||
| col.querySelector('a + a')?.closest('p').classList.add('action-area'); | ||
| container.insertAdjacentElement('beforeend', col.children[0]); | ||
| col.remove(); | ||
| }); | ||
| el.classList.add('text-block', 'con-block'); | ||
| let rows = el.querySelectorAll(':scope > div'); | ||
| if (rows.length > 1) { | ||
| el.classList.add('has-bg'); | ||
| const [head, ...tail] = rows; | ||
| decorateBlockBg(el, head); | ||
| rows = tail; | ||
| } | ||
| const size = getBlockSize(el); | ||
| decorateBlockText(el, size); | ||
| rows.forEach((row) => { row.classList.add('foreground'); }); | ||
| let helperClasses = []; | ||
| if (el.classList.contains('full-width')) helperClasses.push('center', 'xxl-spacing'); | ||
| if (el.classList.contains('intro')) helperClasses.push('xxl-spacing-top', 'xl-spacing-bottom'); | ||
| if (el.classList.contains('vertical')) { | ||
| const elAction = el.querySelector('.action-area'); | ||
| if (elAction) elAction.classList.add('body-S'); | ||
| } | ||
| el.classList.add(...helperClasses); | ||
| } |
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
Oops, something went wrong.