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

feat(icons): Renaming basket, gear and back icons - FRONT-4266 #3241

Merged
merged 3 commits into from Feb 15, 2024
Merged

feat(icons): Renaming basket, gear and back icons - FRONT-4266 #3241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41e4bff
feat(icons): Renaming basket, gear and back icons - FRONT-4266
planctus Feb 15, 2024
aa19aa8
Merge branch 'v4-dev' of github.com:ec-europa/europa-component-librar…
planctus Feb 15, 2024
ceb182a
feat(icons): Updating icon snapshot - FRONT-4266
planctus Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/Migrating-v4.md
View file
Open in desktop
Expand Up @@ -72,6 +72,10 @@ Inner and negative shadows are also not part of EC styles anymore.

Spacing scale has been enriched for EC, now going from 2XS to 6XL (previously 2XS to 4XL). Default value is still the same: spacing M is 1rem

### Icons

- Few icons have been renamed: basket is now `shopping-bag`, gear is now `settings` and back is `arrow-left`

## Component modifications

### Accordion
Expand Down
70 changes: 35 additions & 35 deletions src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap
View file
Open in desktop
@@ -1,42 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Icon All icons - icon audio renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#audio"
/>
</svg>
</jest>
`;

exports[`Icon All icons - icon back renders correctly 1`] = `
exports[`Icon All icons - icon arrow-left renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</jest>
`;

exports[`Icon All icons - icon basket renders correctly 1`] = `
exports[`Icon All icons - icon audio renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#basket"
xlink:href="/icons.svg#audio"
/>
</svg>
</jest>
Expand Down Expand Up @@ -434,20 +420,6 @@ exports[`Icon All icons - icon fullscreen renders correctly 1`] = `
</jest>
`;

exports[`Icon All icons - icon gear renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#gear"
/>
</svg>
</jest>
`;

exports[`Icon All icons - icon global renders correctly 1`] = `
<jest>
<svg
Expand Down Expand Up @@ -840,6 +812,20 @@ exports[`Icon All icons - icon search renders correctly 1`] = `
</jest>
`;

exports[`Icon All icons - icon settings renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#settings"
/>
</svg>
</jest>
`;

exports[`Icon All icons - icon share renders correctly 1`] = `
<jest>
<svg
Expand All @@ -854,6 +840,20 @@ exports[`Icon All icons - icon share renders correctly 1`] = `
</jest>
`;

exports[`Icon All icons - icon shopping-bag renders correctly 1`] = `
<jest>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--m"
focusable="false"
>
<use
xlink:href="/icons.svg#shopping-bag"
/>
</svg>
</jest>
`;

exports[`Icon All icons - icon solid-arrow renders correctly 1`] = `
<jest>
<svg
Expand Down Expand Up @@ -1000,7 +1000,7 @@ exports[`Icon Generic tests - Any icon renders correctly with accessibility cont
Description
</desc>
<use
xlink:href="/icons.svg#audio"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</jest>
Expand All @@ -1016,7 +1016,7 @@ exports[`Icon Generic tests - Any icon renders correctly with extra attributes 1
focusable="false"
>
<use
xlink:href="/icons.svg#audio"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</jest>
Expand All @@ -1030,7 +1030,7 @@ exports[`Icon Generic tests - Any icon renders correctly with extra class names
focusable="false"
>
<use
xlink:href="/icons.svg#audio"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</jest>
Expand Down
52 changes: 26 additions & 26 deletions src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap
View file
Open in desktop
Expand Up @@ -338,7 +338,7 @@ exports[`Menu Default renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -443,7 +443,7 @@ exports[`Menu Default renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -837,7 +837,7 @@ exports[`Menu Default renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -1190,7 +1190,7 @@ exports[`Menu Default renders correctly with a external first level menu item 1`
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -1309,7 +1309,7 @@ exports[`Menu Default renders correctly with a external first level menu item 1`
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -1703,7 +1703,7 @@ exports[`Menu Default renders correctly with a external first level menu item 1`
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -2058,7 +2058,7 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -2163,7 +2163,7 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -2557,7 +2557,7 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -2910,7 +2910,7 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -3015,7 +3015,7 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -3409,7 +3409,7 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -3762,7 +3762,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -3867,7 +3867,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -3997,7 +3997,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -4377,7 +4377,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -4559,7 +4559,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -4697,7 +4697,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -4816,7 +4816,7 @@ exports[`Menu Light renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -5169,7 +5169,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -5274,7 +5274,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -5404,7 +5404,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -5784,7 +5784,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -5966,7 +5966,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -6104,7 +6104,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down Expand Up @@ -6223,7 +6223,7 @@ exports[`Menu Long renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#back"
xlink:href="/icons.svg#arrow-left"
/>
</svg>
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/menu/menu-item.html.twig
View file
Open in desktop
Expand Up @@ -114,7 +114,7 @@
icon_path: _icon_path,
},
icon: {
name: 'back',
name: 'arrow-left',
size: 'xs',
path: icon_path,
transform: 'rotate-180',
Expand Down
0 src/resources/icons-ec/src/all/back.svg → ...resources/icons-ec/src/all/arrow-left.svg
View file
Open in desktop
File renamed without changes
0 src/resources/icons-ec/src/all/gear.svg → src/resources/icons-ec/src/all/settings.svg
View file
Open in desktop
File renamed without changes
0 src/resources/icons-ec/src/all/basket.svg → ...sources/icons-ec/src/all/shopping-bag.svg
View file
Open in desktop
File renamed without changes
0 src/resources/icons-eu/src/all/back.svg → ...resources/icons-eu/src/all/arrow-left.svg
View file
Open in desktop
File renamed without changes
0 src/resources/icons-eu/src/all/gear.svg → src/resources/icons-eu/src/all/settings.svg
View file
Open in desktop
File renamed without changes
0 src/resources/icons-eu/src/all/basket.svg → ...sources/icons-eu/src/all/shopping-bag.svg
View file
Open in desktop
File renamed without changes
0 src/website/public/gear.svg → src/website/public/settings.svg
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion src/website/scripts/docs.js
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@ const files = glob.sync('**/*.js', {
const publicDir = path.resolve(__dirname, '../public');
const apisDir = 'apis';
const outputDir = path.resolve(publicDir, apisDir);
const icon = fs.readFileSync(`${publicDir}/gear.svg`, 'utf-8');
const icon = fs.readFileSync(`${publicDir}/settings.svg`, 'utf-8');

// Create public directory if not exists
try {
Expand Down