Skip to content

Commit

Permalink
Add workspace icons (#1365) (#1366)
Browse files Browse the repository at this point in the history
Also:
* Synced CHANGELOG.md

Signed-off-by: Miki <[email protected]>
(cherry picked from commit cf9cf4a)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent 9daf824 commit 95976e4
Show file tree
Hide file tree
Showing 16 changed files with 498 additions and 0 deletions.
11 changes: 11 additions & 0 deletions src-docs/src/views/icon/icon_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import Ml from './ml';

import Logos from './logos';

import Workspace from './workspace';

import IconSizes from './icon_sizes';

import IconColors from './icon_colors';
Expand Down Expand Up @@ -115,6 +117,15 @@ export const IconExample = {
),
demo: <Logos />,
},
{
title: 'Workspaces',
text: (
<p>
Workspace logos are usually displayed at <OuiCode>16x16</OuiCode> or above.
</p>
),
demo: <Workspace />,
},
{
title: 'Apps',
text: (
Expand Down
61 changes: 61 additions & 0 deletions src-docs/src/views/icon/workspace.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import React from 'react';

import {
OuiFlexGrid,
OuiFlexItem,
OuiIcon,
OuiPanel,
OuiCodeBlock,
OuiCopy,
OuiSpacer,
} from '../../../../src/components';

const iconTypes = [
'wsAnalytics',
'wsEssentials',
'wsObservability',
'wsSearch',
'wsSecurityAnalytics',
'wsSelector',
];

export default () => (
<>
<OuiCodeBlock language="html" isCopyable paddingSize="m">
{'<OuiIcon type="wsSelector" />'}
</OuiCodeBlock>
<OuiSpacer />
<OuiFlexGrid direction="column" columns={3}>
{iconTypes.map((iconType) => (
<OuiFlexItem key={iconType}>
<OuiCopy
display="block"
textToCopy={iconType}
afterMessage={`${iconType} copied`}>
{(copy) => (
<OuiPanel
hasShadow={false}
hasBorder={false}
onClick={copy}
paddingSize="s">
<OuiIcon className="oui-alignMiddle" type={iconType} /> &emsp;{' '}
<small>{iconType}</small>
</OuiPanel>
)}
</OuiCopy>
</OuiFlexItem>
))}
</OuiFlexGrid>
</>
);
103 changes: 103 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -10358,6 +10358,109 @@ exports[`OuiIcon props type wrench is rendered 1`] = `
</svg>
`;

exports[`OuiIcon props type wsAnalytics is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 8.7h4.2v5.6H1V8.7Zm9.8-3.5H15v9.1h-4.2V5.2ZM5.9 1.7h4.2v12.6H5.9V1.7Zm-3.5 8.4v2.8h1.4v-2.8H2.4Zm4.9-7v9.8h1.4V3.1H7.3Zm4.9 3.5v6.3h1.4V6.6h-1.4Z"
/>
</svg>
`;

exports[`OuiIcon props type wsEssentials is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.552 11.929h.734V8.357h1.428v3.572h.734c.094-.859.532-1.567 1.243-2.341.08-.088.594-.62.655-.695a4.286 4.286 0 1 0-6.693-.001c.061.076.576.609.655.695.712.775 1.15 1.483 1.244 2.342Zm.02 1.428v.714h2.857v-.714H6.57ZM3.538 9.785a5.714 5.714 0 1 1 8.922.002c-.444.552-1.604 1.427-1.604 2.499v1.785c0 .79-.64 1.429-1.428 1.429H6.57c-.789 0-1.428-.64-1.428-1.429v-1.785c0-1.072-1.161-1.948-1.604-2.5Z"
/>
</svg>
`;

exports[`OuiIcon props type wsObservability is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.819 9.366v-.003a3.09 3.09 0 0 0-.153-.356L12.16 3.303a.724.724 0 0 0-.151-.22 2.171 2.171 0 0 0-3.073 0 .724.724 0 0 0-.212.511v1.267H7.276V3.594a.724.724 0 0 0-.212-.512 2.172 2.172 0 0 0-3.073 0 .724.724 0 0 0-.15.22L1.333 9.008a2.87 2.87 0 0 0-.153.356v.003a3.138 3.138 0 1 0 6.095 1.047V6.309h1.448v4.104a3.137 3.137 0 1 0 6.095-1.047ZM5.103 4.033a.724.724 0 0 1 .725-.073v3.81a3.132 3.132 0 0 0-2.167-.46l1.442-3.277Zm-.965 8.07a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Zm6.034-8.143a.728.728 0 0 1 .725.073l1.44 3.278a3.132 3.132 0 0 0-2.166.46l.001-3.811Zm1.69 8.143a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSearch is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.048 11.074 15 14.025l-.975.975-2.951-2.952A6.205 6.205 0 0 1 1 7.202 6.205 6.205 0 0 1 7.203 1a6.205 6.205 0 0 1 4.845 10.074Zm-1.382-.512a4.823 4.823 0 0 0-3.463-8.184 4.823 4.823 0 0 0-4.825 4.825 4.823 4.823 0 0 0 8.184 3.463l.104-.104ZM8.015 4.567a1.379 1.379 0 1 0 1.823 1.824 2.758 2.758 0 1 1-5.392.812 2.757 2.757 0 0 1 3.569-2.636Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSecurityAnalytics is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8 .5 5.602 1.245c.312.07.534.346.534.666V9.22a4.09 4.09 0 0 1-1.821 3.403L8 15.5l-4.315-2.877A4.09 4.09 0 0 1 1.864 9.22V2.41c0-.319.222-.596.534-.665L8 .5Zm0 1.397-4.773 1.06V9.22c0 .912.456 1.763 1.215 2.269L8 13.86l3.558-2.372a2.727 2.727 0 0 0 1.215-2.27V2.959L8 1.896ZM8 4.59a1.364 1.364 0 0 1 .683 2.544l-.001 2.91H7.318v-2.91A1.363 1.363 0 0 1 8 4.592Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSelector is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.438 2.655a2 2 0 0 0-2.829 2.829c.217.216.544.382.958.496.409.114.866.167 1.305.185a9.903 9.903 0 0 0 1.22-.028 9.834 9.834 0 0 0 .033-1.215A5.82 5.82 0 0 0 5.94 3.62c-.115-.413-.282-.743-.503-.964Zm1.107 3.936.494.074v-.004l.002-.008.004-.03.014-.108c.01-.092.025-.223.038-.384.025-.32.046-.763.027-1.248a6.81 6.81 0 0 0-.22-1.532c-.14-.505-.372-1.015-.759-1.403a3 3 0 1 0-4.243 4.243c.385.384.894.613 1.398.753.507.14 1.047.2 1.53.22a10.9 10.9 0 0 0 1.745-.073l.03-.004h.008l.002-.001h.001l-.071-.495Zm0 0 .071.495.368-.054.055-.367-.494-.074Zm6.728-3.936a2 2 0 0 0-2.828 0c-.213.214-.373.534-.48.937-.106.4-.15.847-.16 1.275a9.361 9.361 0 0 0 .054 1.202 9.645 9.645 0 0 0 1.203.055c.428-.01.875-.054 1.275-.16.403-.107.723-.267.936-.48a2 2 0 0 0 0-2.829Zm-3.859 3.86-.493.084v-.004l-.002-.008-.005-.03a9.692 9.692 0 0 1-.06-.484c-.03-.315-.06-.75-.049-1.228a6.54 6.54 0 0 1 .193-1.51c.133-.498.356-1.003.74-1.387a3 3 0 0 1 4.242 4.243c-.383.384-.889.607-1.387.74a6.555 6.555 0 0 1-1.51.193 10.361 10.361 0 0 1-1.712-.11l-.03-.004-.007-.002H9.33l.084-.493Zm0 0-.084.493-.35-.06-.059-.35.493-.083ZM6.616 8.792l-.071.495.494-.075v.004l.002.009.004.03.014.107c.01.092.025.223.038.384.025.32.046.764.027 1.249a6.81 6.81 0 0 1-.22 1.531c-.14.506-.372 1.016-.759 1.403a3 3 0 0 1-4.243-4.242c.385-.385.894-.614 1.398-.753a6.864 6.864 0 0 1 1.53-.22 10.903 10.903 0 0 1 1.745.072l.03.004.008.001h.003Zm-.071.495.494-.075-.055-.367-.368-.053-.071.495Zm-.452.454a9.93 9.93 0 0 0-1.221-.029 5.907 5.907 0 0 0-1.305.185c-.414.115-.741.28-.958.497a2 2 0 0 0 2.829 2.828c.22-.22.388-.55.503-.964a5.82 5.82 0 0 0 .184-1.303 9.689 9.689 0 0 0-.032-1.214Zm6.5-.794c.498.132 1.004.356 1.387.74a3 3 0 0 1-4.242 4.242c-.384-.383-.607-.889-.74-1.387a6.555 6.555 0 0 1-.193-1.51 10.361 10.361 0 0 1 .11-1.712l.004-.03.001-.008V9.28l.001-.001.493.084-.084-.493h.004l.008-.002.03-.005a9.651 9.651 0 0 1 .484-.06c.315-.031.75-.06 1.228-.05a6.582 6.582 0 0 1 1.509.194Zm-3.179.416L9.33 8.87l-.35.06-.059.349.493.084Zm.445.445a9.645 9.645 0 0 0-.054 1.202c.01.429.054.876.16 1.276.107.403.267.723.48.936a2 2 0 0 0 2.828-2.828c-.213-.214-.533-.373-.936-.48a5.537 5.537 0 0 0-1.275-.16 9.36 9.36 0 0 0-1.203.054Z"
fill-rule="evenodd"
/>
</svg>
`;

exports[`OuiIcon render different types of icons renders custom components 1`] = `
<span
aria-hidden="true"
Expand Down
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsAnalytics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from "react";
const OuiIconWsAnalytics = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M1 8.7h4.2v5.6H1V8.7Zm9.8-3.5H15v9.1h-4.2V5.2ZM5.9 1.7h4.2v12.6H5.9V1.7Zm-3.5 8.4v2.8h1.4v-2.8H2.4Zm4.9-7v9.8h1.4V3.1H7.3Zm4.9 3.5v6.3h1.4V6.6h-1.4Z" />
</svg>
);
export const icon = OuiIconWsAnalytics;
29 changes: 29 additions & 0 deletions src/components/icon/assets/workspace/wsAnalytics.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsEssentials.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from "react";
const OuiIconWsEssentials = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M6.552 11.929h.734V8.357h1.428v3.572h.734c.094-.859.532-1.567 1.243-2.341.08-.088.594-.62.655-.695a4.286 4.286 0 1 0-6.693-.001c.061.076.576.609.655.695.712.775 1.15 1.483 1.244 2.342Zm.02 1.428v.714h2.857v-.714H6.57ZM3.538 9.785a5.714 5.714 0 1 1 8.922.002c-.444.552-1.604 1.427-1.604 2.499v1.785c0 .79-.64 1.429-1.428 1.429H6.57c-.789 0-1.428-.64-1.428-1.429v-1.785c0-1.072-1.161-1.948-1.604-2.5Z" />
</svg>
);
export const icon = OuiIconWsEssentials;
29 changes: 29 additions & 0 deletions src/components/icon/assets/workspace/wsEssentials.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsObservability.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from 'react';
const OuiIconWsObservability = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M14.819 9.366v-.003a3.09 3.09 0 0 0-.153-.356L12.16 3.303a.724.724 0 0 0-.151-.22 2.171 2.171 0 0 0-3.073 0 .724.724 0 0 0-.212.511v1.267H7.276V3.594a.724.724 0 0 0-.212-.512 2.172 2.172 0 0 0-3.073 0 .724.724 0 0 0-.15.22L1.333 9.008a2.87 2.87 0 0 0-.153.356v.003a3.138 3.138 0 1 0 6.095 1.047V6.309h1.448v4.104a3.137 3.137 0 1 0 6.095-1.047ZM5.103 4.033a.724.724 0 0 1 .725-.073v3.81a3.132 3.132 0 0 0-2.167-.46l1.442-3.277Zm-.965 8.07a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Zm6.034-8.143a.728.728 0 0 1 .725.073l1.44 3.278a3.132 3.132 0 0 0-2.166.46l.001-3.811Zm1.69 8.143a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Z" />
</svg>
);
export const icon = OuiIconWsObservability;
37 changes: 37 additions & 0 deletions src/components/icon/assets/workspace/wsObservability.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsSearch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from 'react';
const OuiIconWsSearch = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M12.048 11.074 15 14.025l-.975.975-2.951-2.952A6.205 6.205 0 0 1 1 7.202 6.205 6.205 0 0 1 7.203 1a6.205 6.205 0 0 1 4.845 10.074Zm-1.382-.512a4.823 4.823 0 0 0-3.463-8.184 4.823 4.823 0 0 0-4.825 4.825 4.823 4.823 0 0 0 8.184 3.463l.104-.104ZM8.015 4.567a1.379 1.379 0 1 0 1.823 1.824 2.758 2.758 0 1 1-5.392.812 2.757 2.757 0 0 1 3.569-2.636Z" />
</svg>
);
export const icon = OuiIconWsSearch;
Loading

0 comments on commit 95976e4

Please sign in to comment.