Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(print): fix display of default html tag for print - FRONT-3699 #2660

Merged
merged 2 commits into from
Oct 17, 2022
Merged

fix(print): fix display of default html tag for print - FRONT-3699 #2660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
160e283
add print css
emeryro Oct 10, 2022
c18b7c6
Merge branch 'v3.5.0-dev' into FRONT-3699-print
emeryro Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 89 additions & 61 deletions src/implementations/twig/utilities/html-tag/index.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,68 +10,96 @@ export default {
},
};

export const Default = () => {
const h6 = getSystem() === 'eu' ? '<h6>Heading 6</h6>' : '';
return `
export const Default = () => `
<h2 class="ecl-u-type-heading-2">HTML tag styling</h2>
<p class="ecl-u-type-paragraph">To see the following HTML tags styled with ECL, just activate the optional "ecl-default" css file in the "CSS resources" tab.</p>
<hr />
<div class="ecl">
<a href="#">Link</a><br />
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
${h6}
<p>Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur vulputate venenatis. Proin tempus viverra felis, a sollicitudin lorem rutrum sit amet. Phasellus mattis fringilla iaculis.</p>
<ul>
<li>Unordered list</li>
<li>Unordered list
<ul>
<li>Nested unordered list</li>
<li>Nested unordered list</li>
</ul>
</li>
</ul><br />
<ol>
<li>Ordered list</li>
<li>Ordered list
<ol>
<li>Nested ordered list</li>
<li>Nested ordered list</li>
</ol>
</li>
</ol>
<dl>
<dt>Description term</dt>
<dd>Description definition</dd>
<dt>Description term</dt>
<dd>Description definition</dd>
</dl>
<button>Button</button><br /><br />
<table>
<thead>
<th>Table heading</th>
<th>Table heading</th>
</thead>
<tbody>
<tr>
<td data-ecl-table-header="Table heading">Table cell</td>
<td data-ecl-table-header="Table heading">Table cell</td>
</tr>
<tr>
<td data-ecl-table-header="Table heading">Table cell</td>
<td data-ecl-table-header="Table heading">Table cell</td>
</tr>
</tbody>
</table><br />
<blockquote>
Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur vulputate venenatis.
<cite>Someone</cite>
</blockquote>
</div>
<p class="ecl-u-type-paragraph">To see the following HTML tags styled with ECL, just activate the optional "ecl-${getSystem()}-default" or "ecl-${getSystem()}-default-print" css file in the "CSS resources" tab.</p>
<details>
<summary><strong>Link and button</strong></summary>
<br />
<div class="ecl">
<a href="#">Link</a><br /><br />
<button>Button</button>
</div>
</details>
<br />
<details>
<summary><strong>Typography</strong></summary>
<div class="ecl">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis volutpat diam. Aliquam ac eleifend elit. Vivamus urna orci, vehicula nec sagittis et, facilisis a dolor. Mauris sed justo a sapien venenatis lobortis. Sed eu ornare nunc. Curabitur vitae est suscipit, mattis magna aliquam, scelerisque lorem. Aenean sem ex, dignissim eget justo vitae, fringilla dictum ligula.</p>
</div>
</details>
<br />
<details>
<summary><strong>Lists</strong></summary>
<br />
<div class="ecl">
<ul>
<li>Unordered list</li>
<li>Unordered list
<ul>
<li>Nested unordered list</li>
<li>Nested unordered list</li>
</ul>
</li>
</ul>
<br />
<ol>
<li>Ordered list</li>
<li>Ordered list
<ol>
<li>Nested ordered list</li>
<li>Nested ordered list</li>
</ol>
</li>
</ol>
<dl>
<dt>Description term</dt>
<dd>Description definition</dd>
<dt>Description term</dt>
<dd>Description definition</dd>
</dl>
</div>
</details>
<br />
<details>
<summary><strong>Blockquote</strong></summary>
<br />
<div class="ecl">
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur vulputate venenatis.
<cite>Someone</cite>
</blockquote>
</div>
</details>
<br />
<details>
<summary><strong>Table</strong></summary>
<br />
<div class="ecl">
<table>
<thead>
<th>Table heading</th>
<th>Table heading</th>
</thead>
<tbody>
<tr>
<td data-ecl-table-header="Table heading">Table cell</td>
<td data-ecl-table-header="Table heading">Table cell</td>
</tr>
<tr>
<td data-ecl-table-header="Table heading">Table cell</td>
<td data-ecl-table-header="Table heading">Table cell</td>
</tr>
</tbody>
</table>
</div>
</details>
`;
};

Default.storyName = 'default';
12 changes: 8 additions & 4 deletions src/implementations/vanilla/components/blockquote/_blockquote-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ $_author-margin-top: null !default;
$_author-font-weight: null !default;
$_author-color: null !default;

.ecl-blockquote {
.ecl-blockquote,
%ecl-blockquote {
border-left: $_border-width solid $_border-color;
border-radius: $_border-radius;
margin: 0;
Expand All @@ -24,7 +25,8 @@ $_author-color: null !default;
padding-top: map.get(theme.$spacing-print, 'm');
}

.ecl-blockquote__citation {
.ecl-blockquote__citation,
%ecl-blockquote {
color: $_body-color;
font: $_body-font;
font-style: italic;
Expand All @@ -44,12 +46,14 @@ $_author-color: null !default;
margin: 0;
}

.ecl-blockquote__attribution {
.ecl-blockquote__attribution,
%ecl-blockquote__author {
font: map.get(theme.$font-prolonged-print, 'l');
margin-top: $_author-margin-top;
}

.ecl-blockquote__author {
.ecl-blockquote__author,
%ecl-blockquote__author {
color: $_author-color;
font: map.get(theme.$font-prolonged-print, 'l');
font-weight: $_author-font-weight;
Expand Down
6 changes: 4 additions & 2 deletions src/implementations/vanilla/components/button/_button-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ $_font-weight: null !default;
$_padding-horizontal: map.get(theme.$spacing-print, 'm');
$_padding-vertical: map.get(theme.$spacing-print, 's');

.ecl-button {
.ecl-button,
%ecl-button {
appearance: none;
background: none;
border-radius: $_border-radius;
Expand Down Expand Up @@ -73,7 +74,8 @@ $_secondary-background-color: map.get(theme.$color, 'white-100') !default;
$_secondary-border-color: map.get(theme.$color, 'blue-100') !default;
$_secondary-color: map.get(theme.$color, 'blue-100') !default;

.ecl-button--secondary {
.ecl-button--secondary,
%ecl-button {
background-color: $_secondary-background-color;
border: $_border-width solid $_secondary-border-color;
color: $_secondary-color;
Expand Down
18 changes: 12 additions & 6 deletions src/implementations/vanilla/components/description-list/_description-list-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ $_term-font: null !default;
$_definition-color: null !default;
$_taxonomy-color: null !default;

.ecl-description-list {
.ecl-description-list,
%ecl-description-list {
margin: 0;
}

.ecl-description-list__term {
.ecl-description-list__term,
%ecl-description-list__term {
color: $_term-color;
font: $_term-font;
font-weight: map.get(theme.$font-weight, 'bold');
Expand All @@ -35,7 +37,8 @@ $_taxonomy-color: null !default;
margin-top: map.get(theme.$spacing-print, '2xs');
}

.ecl-description-list__definition {
.ecl-description-list__definition,
%ecl-description-list__definition {
color: $_definition-color;
font: map.get(theme.$font-prolonged-print, 'm');
margin-inline-start: 0;
Expand Down Expand Up @@ -125,12 +128,14 @@ $_taxonomy-color: null !default;
$_term-width: 32%;
$_definition-width: 68%;

.ecl-description-list--horizontal {
.ecl-description-list--horizontal,
%ecl-description-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;

.ecl-description-list__term {
.ecl-description-list__term,
%ecl-description-list__term {
margin-top: map.get(theme.$spacing-print, 'm');
width: $_term-width;
}
Expand All @@ -139,7 +144,8 @@ $_definition-width: 68%;
margin-top: 0;
}

.ecl-description-list__definition {
.ecl-description-list__definition,
%ecl-description-list__definition {
align-items: flex-start;
margin-inline-start: map.get(theme.$spacing-print, 'xl');
margin-top: map.get(theme.$spacing-print, 'm');
Expand Down
3 changes: 2 additions & 1 deletion src/implementations/vanilla/components/link/_link-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
$_color: map.get(theme.$color, 'blue-100');
$_negative-color: null !default;

.ecl-link {
.ecl-link,
%ecl-link {
color: $_color;
page-break-inside: avoid;
text-decoration: none;
Expand Down
12 changes: 9 additions & 3 deletions src/implementations/vanilla/components/ordered-list/ordered-list-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,26 @@

$_text-color: map.get(theme.$color, 'grey-100');

.ecl-ordered-list {
.ecl-ordered-list,
%ecl-ordered-list {
color: $_text-color;
font: map.get(theme.$font-prolonged-print, 'm');
list-style-position: inside;
margin: 0;
padding: 0;
}

.ecl-ordered-list__item {
.ecl-ordered-list__item,
%ecl-ordered-list__item {
margin-top: map.get(theme.$spacing-print, 's');

&:first-of-type {
margin-top: 0;
}
}

.ecl-ordered-list .ecl-ordered-list {
.ecl-ordered-list .ecl-ordered-list,
%ecl-ordered-list--nested {
margin-top: map.get(theme.$spacing-print, 's');
padding-inline-start: map.get(theme.$spacing-print, 'l');
}
12 changes: 8 additions & 4 deletions src/implementations/vanilla/components/table/table-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
@use 'sass:map';
@use '@ecl/theme-dev/theme';

.ecl-table {
.ecl-table,
%ecl-table {
border-collapse: collapse;
color: map.get(theme.$color, 'grey-100');
font: map.get(theme.$font-print, 'm');
Expand All @@ -15,23 +16,26 @@
width: 100%;
}

.ecl-table__header {
.ecl-table__header,
%ecl-table__header {
padding: map.get(theme.$spacing-print, 's')
map.get(theme.$spacing-print, 'xl') map.get(theme.$spacing-print, 's')
map.get(theme.$spacing-print, 'm');
text-align: start;
vertical-align: baseline;
}

.ecl-table__row {
.ecl-table__row,
%ecl-table__row {
border-bottom: 1px solid map.get(theme.$color, 'grey-50');
}

.ecl-table__head .ecl-table__row:first-child {
border-bottom: 2px solid map.get(theme.$color, 'grey-100');
}

.ecl-table__cell {
.ecl-table__cell,
%ecl-table__cell {
padding: map.get(theme.$spacing-print, 's')
map.get(theme.$spacing-print, 'xl') map.get(theme.$spacing-print, 's')
map.get(theme.$spacing-print, 'm');
Expand Down
9 changes: 6 additions & 3 deletions src/implementations/vanilla/components/unordered-list/unordered-list-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@

$_text-color: map.get(theme.$color, 'grey-100');

.ecl-unordered-list {
.ecl-unordered-list,
%ecl-unordered-list {
color: $_text-color;
font: map.get(theme.$font-prolonged-print, 'm');
margin: 0;
}

.ecl-unordered-list__item {
.ecl-unordered-list__item,
%ecl-unordered-list__item {
margin-top: map.get(theme.$spacing-print, 's');

&:first-of-type {
Expand All @@ -28,6 +30,7 @@ $_text-color: map.get(theme.$color, 'grey-100');
padding-inline-start: 0;
}

.ecl-unordered-list .ecl-unordered-list {
.ecl-unordered-list .ecl-unordered-list,
%ecl-unordered-list--nested {
margin-top: map.get(theme.$spacing-print, 's');
}
Loading