Add workspace icons

Signed-off-by: Miki <[email protected]>

src-docs/src/views/icon/icon_example.js

@@ -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';
@@ -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: (

src-docs/src/views/icon/workspace.js

@@ -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>
+  </>
+);

src/components/icon/assets/workspace/wsAnalytics.js

@@ -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;

src/components/icon/assets/workspace/wsEssentials.js

@@ -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;

src/components/icon/assets/workspace/wsObservability.js

@@ -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;

src/components/icon/assets/workspace/wsSearch.js

@@ -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;

src/components/icon/assets/workspace/wsSecurityAnalytics.js

@@ -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 OuiIconWsSecurityAnalytics = ({ 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="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>
+);
+export const icon = OuiIconWsSecurityAnalytics;