Skip to content

Commit

Permalink
Merge 3e212c5 into 19abb3d
Browse files Browse the repository at this point in the history
  • Loading branch information
dgdavid committed Feb 26, 2023
2 parents 19abb3d + 3e212c5 commit 236a2f1
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 29 deletions.
4 changes: 2 additions & 2 deletions web/__mocks__/svg.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';

export default () => (
export default ({...props}) => (
// Simple SVG square based on a wikimedia example https://commons.wikimedia.org/wiki/SVG_examples
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="48" height="48">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="48" height="48" {...props}>
<rect x="0" y="0" width="48" height="48" />
</svg>
);
5 changes: 5 additions & 0 deletions web/package/cockpit-d-installer.changes
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
-------------------------------------------------------------------
Tue Feb 21 00:50:48 UTC 2023 - David Diaz <dgonzalez@suse.com>

- Set icons as aria-hidden (gh#yast/d-installer#437).

-------------------------------------------------------------------
Mon Feb 20 22:52:48 UTC 2023 - David Diaz <dgonzalez@suse.com>

Expand Down
57 changes: 30 additions & 27 deletions web/src/components/layout/Icon.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,38 +23,39 @@ import React from 'react';

// NOTE: "@icons" is an alias to use a shorter path to real icons location.
// Check the tsconfig.json file to see its value.
import Inventory from "@icons/inventory_2.svg?component";
import Translate from "@icons/translate.svg?component";
import SettingsEthernet from "@icons/settings_ethernet.svg?component";
import EditSquare from "@icons/edit_square.svg?component";
import Edit from "@icons/edit.svg?component";
import Apps from "@icons/apps.svg?component";
import CheckCircle from "@icons/check_circle.svg?component";
import Delete from "@icons/delete.svg?component";
import Description from "@icons/description.svg?component";
import Download from "@icons/download.svg?component";
import Downloading from "@icons/downloading.svg?component";
import Edit from "@icons/edit.svg?component";
import EditSquare from "@icons/edit_square.svg?component";
import Error from "@icons/error.svg?component";
import HardDrive from "@icons/hard_drive.svg?component";
import Help from "@icons/help.svg?component";
import HomeStorage from "@icons/home_storage.svg?component";
import Info from "@icons/info.svg?component";
import Inventory from "@icons/inventory_2.svg?component";
import Lan from "@icons/lan.svg?component";
import Lock from "@icons/lock.svg?component";
import ManageAccounts from "@icons/manage_accounts.svg?component";
import Menu from "@icons/menu.svg?component";
import MenuOpen from "@icons/menu_open.svg?component";
import HomeStorage from "@icons/home_storage.svg?component";
import Problem from "@icons/problem.svg?component";
import Error from "@icons/error.svg?component";
import CheckCircle from "@icons/check_circle.svg?component";
import TaskAlt from "@icons/task_alt.svg?component";
import Downloading from "@icons/downloading.svg?component";
import MoreVert from "@icons/more_vert.svg?component";
import Wifi from "@icons/wifi.svg?component";
import Lan from "@icons/lan.svg?component";
import Lock from "@icons/lock.svg?component";
import SignalCellularAlt from "@icons/signal_cellular_alt.svg?component";
import SettingsFill from "@icons/settings-fill.svg?component";
import Problem from "@icons/problem.svg?component";
import Refresh from "@icons/refresh.svg?component";
import SettingsApplications from "@icons/settings_applications.svg?component";
import Info from "@icons/info.svg?component";
import Delete from "@icons/delete.svg?component";
import SettingsEthernet from "@icons/settings_ethernet.svg?component";
import SettingsFill from "@icons/settings-fill.svg?component";
import SignalCellularAlt from "@icons/signal_cellular_alt.svg?component";
import TaskAlt from "@icons/task_alt.svg?component";
import Terminal from "@icons/terminal.svg?component";
import Translate from "@icons/translate.svg?component";
import Warning from "@icons/warning.svg?component";
import Apps from "@icons/apps.svg?component";
import Wifi from "@icons/wifi.svg?component";

import Loading from "./three-dots-loader-icon.svg?component";
import Description from "@icons/description.svg?component";
import Refresh from "@icons/refresh.svg?component";
import Terminal from "@icons/terminal.svg?component";

const icons = {
apps: Apps,
Expand All @@ -79,6 +80,7 @@ const icons = {
menu_open: MenuOpen,
more_vert: MoreVert,
problem: Problem,
refresh: Refresh,
settings: SettingsFill,
settings_applications: SettingsApplications,
settings_ethernet: SettingsEthernet,
Expand All @@ -87,8 +89,7 @@ const icons = {
terminal: Terminal,
translate: Translate,
warning: Warning,
wifi: Wifi,
refresh: Refresh
wifi: Wifi
};

/**
Expand All @@ -107,14 +108,16 @@ const icons = {
*
* @param {object} props - component props
* @param {string} props.name - desired icon
* @param {string} [props.className=""] - CSS classes
* @param {string|number} [props.size=32] - the icon width and height
* @param {object} [props.otherProps] other props sent to SVG icon
*
*/
export default function Icon({ name, size = 32, ...otherProps }) {
export default function Icon({ name, className = "", size = 32, ...otherProps }) {
const IconComponent = icons[name];
const cssClassName = `${className} icon-size-${size}`.trim();

return (IconComponent)
? <IconComponent className={`icon-size-${size}`} {...otherProps} />
: <em>`icon ${name} not found!`</em>;
? <IconComponent className={cssClassName} aria-hidden="true" {...otherProps} />
: <em>icon {name} not found!</em>;
}
40 changes: 40 additions & 0 deletions web/src/components/layout/Icon.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Copyright (c) [2023] SUSE LLC
*
* All Rights Reserved.
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of version 2 of the GNU General Public License as published
* by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, contact SUSE LLC.
*
* To contact SUSE LLC about this file by physical or electronic mail, you may
* find current contact information at www.suse.com.
*/

import React from "react";
import { screen } from "@testing-library/react";
import { plainRender } from "~/test-utils";
import { Icon } from "~/components/layout";

describe("when given a known name", () => {
it("renders an aria-hidden SVG element", async () => {
const { container } = plainRender(<Icon name="wifi" />);
const svgElement = container.querySelector('svg');
expect(svgElement).toHaveAttribute("aria-hidden", "true");
});
});

describe("when given an unknown name", () => {
it("renders an informative text", async () => {
plainRender(<Icon name="apsens" />);
await screen.findByText("icon apsens not found!", { name: /options/i });
});
});

0 comments on commit 236a2f1

Please sign in to comment.