@epilot360/icons 1.12.1 → 1.12.3

package/src/react/ThumbUp/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/ThumbUp/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/ThumbUp/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'thumb_up';
+
+export function ThumbUp(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default ThumbUp;

package/src/react/ThumbUp/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { ThumbUp } from '.';
+
+const story = generateStory(ThumbUp);
+
+export default {
+  title: 'Icons/ThumbUp',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/TwoColumns/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/TwoColumns/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/TwoColumns/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'two_columns';
+
+export function TwoColumns(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default TwoColumns;

package/src/react/TwoColumns/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { TwoColumns } from '.';
+
+const story = generateStory(TwoColumns);
+
+export default {
+  title: 'Icons/TwoColumns',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Upload/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Upload/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Upload/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'upload';
+
+export function Upload(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Upload;

package/src/react/Upload/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Upload } from '.';
+
+const story = generateStory(Upload);
+
+export default {
+  title: 'Icons/Upload',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Visibility/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Visibility/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Visibility/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'visibility';
+
+export function Visibility(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Visibility;

package/src/react/Visibility/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Visibility } from '.';
+
+const story = generateStory(Visibility);
+
+export default {
+  title: 'Icons/Visibility',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/VisibilityOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/VisibilityOff/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/VisibilityOff/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'visibility_off';
+
+export function VisibilityOff(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default VisibilityOff;

package/src/react/VisibilityOff/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { VisibilityOff } from '.';
+
+const story = generateStory(VisibilityOff);
+
+export default {
+  title: 'Icons/VisibilityOff',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Warning/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Warning/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Warning/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'warning';
+
+export function Warning(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Warning;

package/src/react/Warning/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Warning } from '.';
+
+const story = generateStory(Warning);
+
+export default {
+  title: 'Icons/Warning',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Webhook/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Webhook/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Webhook/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'webhook';
+
+export function Webhook(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Webhook;

package/src/react/Webhook/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Webhook } from '.';
+
+const story = generateStory(Webhook);
+
+export default {
+  title: 'Icons/Webhook',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/Workflow/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { ReactComponent as Filled } from '../../svg/Workflow/icon-fill.svg';
+import { ReactComponent as Outlined } from '../../svg/Workflow/icon.svg';
+import { defaultIconProps } from '../common';
+import type { IconPropsReact } from '../types';
+
+const name = 'workflow';
+
+export function Workflow(props: IconPropsReact) {
+  const { variant, ...restProps } = {
+    ...defaultIconProps,
+    ...props,
+  };
+  const IconComponent = variant === 'outlined' ? Outlined : Filled;
+
+  const overrides = props.size ? { width: props.size, height: props.size } : {};
+
+  return <IconComponent aria-label={name} {...restProps} {...overrides} />;
+}
+
+export default Workflow;

package/src/react/Workflow/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Workflow } from '.';
+
+const story = generateStory(Workflow);
+
+export default {
+  title: 'Icons/Workflow',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/common.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types';
+
+export const defaultIconProps: IconProps = {
+  width: 20,
+  height: 20,
+  fill: 'currentColor',
+  variant: 'filled',
+};

package/src/react/index.ts

@@ -0,0 +1,133 @@
+export * from './Epilot';
+export * from './Edit';
+export * from './OpenInNew';
+export * from './Share';
+export * from './Delete';
+export * from './Add';
+export * from './AddCircle';
+export * from './Check';
+export * from './CheckCircle';
+export * from './Warning';
+export * from './Error';
+export * from './Info';
+export * from './Help';
+export * from './ContentCopy';
+export * from './DataObject';
+export * from './Notifications';
+export * from './Visibility';
+export * from './VisibilityOff';
+export * from './Close';
+export * from './ExpandMore';
+export * from './ExpandLess';
+export * from './ChevronRight';
+export * from './ChevronLeft';
+export * from './Search';
+export * from './Settings';
+export * from './Calendar';
+export * from './Explore';
+export * from './DragIndicator';
+export * from './Download';
+export * from './Refresh';
+export * from './Menu';
+export * from './Link';
+export * from './Login';
+export * from './Logout';
+export * from './Lock';
+export * from './LockOpen';
+export * from './Table';
+export * from './Attributes';
+export * from './ArrowRight';
+export * from './ArrowLeft';
+export * from './Dashboard';
+export * from './Opportunity';
+export * from './Order';
+export * from './Contact';
+export * from './Account';
+export * from './Contract';
+export * from './Message';
+export * from './File';
+export * from './Note';
+export * from './Document';
+export * from './Templates';
+export * from './Product';
+export * from './Price';
+export * from './Tax';
+export * from './Submission';
+export * from './Partner';
+export * from './Partnering';
+export * from './Meter';
+export * from './Entity';
+export * from './Webhook';
+export * from './Design';
+export * from './Workflow';
+export * from './Phase';
+export * from './Automation';
+export * from './Journey';
+export * from './Relations';
+export * from './Availability';
+export * from './Filter';
+export * from './Sort';
+export * from './Desktop';
+export * from './Phone';
+export * from './Image';
+export * from './Pause';
+export * from './Play';
+export * from './Alarm';
+export * from './ArrowCircleLeft';
+export * from './MoreVert';
+export * from './MoreHoriz';
+export * from './QuestionMark';
+export * from './Skip';
+export * from './Checklist';
+export * from './PersonCheck';
+export * from './Comment';
+export * from './Star';
+export * from './Exclamation';
+export * from './Primary';
+export * from './PriceMapping';
+export * from './Reply';
+export * from './Resize';
+export * from './Portal';
+export * from './ThumbUp';
+export * from './ThumbDown';
+export * from './EntityBuilder';
+export * from './Connection';
+export * from './CheckBox';
+export * from './Number';
+export * from './RadioButton';
+export * from './TextField';
+export * from './Address';
+export * from './Signature';
+export * from './Upload';
+export * from './Calculator';
+export * from './Payment';
+export * from './Consent';
+export * from './Paragraph';
+export * from './Action';
+export * from './AttributeEdit';
+export * from './Summary';
+export * from './Solar';
+export * from './SDK';
+export * from './Lookup';
+export * from './PreviousProvider';
+export * from './SuccessConfirmation';
+export * from './Category';
+export * from './ExpandContent';
+export * from './CollapseContent';
+export * from './Map';
+export * from './Sun';
+export * from './Frame';
+export * from './EnergySavingsLeaf';
+export * from './AvgTime';
+export * from './Call';
+export * from './Mail';
+export * from './Cable';
+export * from './Stack';
+export * from './TwoColumns';
+export * from './Diagram';
+export * from './Repeat';
+export * from './MoveDown';
+export * from './StepOver';
+export * from './Pending';
+
+export * from './EpilotIcon';

package/src/react/types.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+
+import { IconProps } from '../types';
+
+export interface IconPropsReact extends IconProps, SVGProps<SVGElement> {}

package/src/stories/Readme.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Readme" />
+
+# @epilot360/icons
+
+[![License](http://img.shields.io/:license-mit-blue.svg)](#)
+[![npm version](https://img.shields.io/npm/v/@epilot360/icons.svg)](https://www.npmjs.com/package/@epilot360/icons)
+
+Curated set of epilot icons based on [material-symbols](https://www.npmjs.com/package/material-symbols)
+
+```
+yarn add @epilot360/icons
+```
+
+## Usage
+
+The `@epilot360/icons` package is shipped as an external system module in the 360 portal.
+
+You can import any icon as a React component by name:
+
+```tsx
+import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'
+
+<EditIcon />
+// or
+<EpilotIcon name="edit" />
+```
+
+## Usage outside 360 portal
+
+To avoid bundling the entire `@epilot360/icons` library, you can import the module directly:
+
+```tsx
+import EditIcon from '@epilot360/icons/react/Edit'
+
+<EditIcon />
+```
+
+## Using SVG
+
+To directly use svg files shipped as part of this package, e.g. with `file-loader` you can import from:
+
+```tsx
+import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
+import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'
+
+<img src={EditIconSVG} />
+```
+
+## Using svgIcon()
+
+The `svgIcon()` function returns the raw SVG as a string.
+
+```tsx
+import { svgIcon } from '@epilot360/icons';
+
+<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />
+
+<pre>
+  {svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
+</pre>
+```
+
+# All Icons
+
+import { SearchComponent } from './SearchComponent';
+
+<SearchComponent />

package/src/stories/SVGExample.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
+import { codeBlock } from 'common-tags';
+
+import { SVGExample } from './SVGExample';
+
+const meta: Meta<typeof SVGExample> = {
+  title: 'SVG',
+  component: SVGExample,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'The `svgIcon()` function returns the raw SVG as a string.',
+      },
+      source: {
+        transform: (_code: string, ctx: StoryContext) => {
+          /* eslint-disable prettier/prettier */
+          const { name, variant, fill, size, width, height, xclass } = ctx.args;
+          const iconOpts = `{ name: '${name}', variant: '${variant}', fill: '${fill}'${size || width || height ? size ? `, size: '${size}'` : `, width: '${width}', height: '${height}'` : ''}${xclass ? `, xclass: '${xclass}'` : ''} }`
+
+          return codeBlock`
+          <div dangerouslySetInnerHTML={{ __html: svgIcon(${iconOpts}) }} />
+          
+          <pre>
+            {svgIcon(${iconOpts})}
+          </pre>
+          `;
+          /* eslint-enable prettier/prettier */
+        },
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    fill: { control: 'color' },
+    size: { control: 'number' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SVGExample>;
+
+export const Story: Story = {
+  args: {
+    name: 'edit',
+    variant: 'filled',
+    fill: '#000',
+  },
+};

package/src/stories/SVGExample.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { svgIcon } from '../svg/svgIcon';
+
+export const SVGExample = (props: Parameters<typeof svgIcon>[0]) => (
+  <>
+    <div dangerouslySetInnerHTML={{ __html: svgIcon(props) }} />
+    <pre style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{svgIcon(props)}</pre>
+  </>
+);

package/src/stories/Search.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import { SearchComponent } from './SearchComponent';
+
+<Meta title="Search All Icons" order={20} />
+
+# Search All Icons
+
+<SearchComponent />

package/src/stories/SearchComponent.css

@@ -0,0 +1,48 @@
+.search-component .search-component__input {
+  margin-top: 2rem;
+  margin-bottom: .2rem;
+  position: relative;
+  display: flex;
+}
+
+.search-component__search_icon {
+  position: absolute;
+  top: .5rem;
+  left: .5rem;
+}
+
+.search-component .search-component__count {
+  margin-bottom: 2rem;
+}
+
+.search-component .search-component__input input {
+  font-size: 1.2rem;
+  padding: .4rem .5rem .4rem 2rem;
+  width: 100%;
+  border-radius: 1rem;
+  border: 1px solid #ccc;
+}
+
+
+.search-component .search-component__icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+
+.search-component .search-component__icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 151px;
+  height: 150px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  border-radius: 1rem;
+}
+
+.search-component .search-component__icon:hover {
+  background-color: #ccc;
+}