New/IconsPack: Examples

packages/assets/icons/stories/IconsPack.mdx

@@ -5,6 +5,8 @@ import { Unstyled } from '@storybook/blocks';
 import Code from './content/Code.mdx';
 import Usage from './content/Usage.mdx';
 import License from './content/License.mdx';
+import Examples from './content/Examples.mdx';
+
 
 <Meta title="SUI/Icons Pack" />
 
@@ -20,6 +22,9 @@ import License from './content/License.mdx';
 		<div id="code" label="Code">
 			<Code />
 		</div>
+		<div id="examples" label="Examples">
+			<Examples />
+		</div>
 		<div id="license" label="License">
 			<License />
 		</div>

packages/assets/icons/stories/content/Examples.mdx

@@ -0,0 +1,49 @@
+import { Section, Switcher, Preview, Snippet } from '@wpmudev/sui-docs';
+import { ClockAlt, ArrowRight, Bell, PluginShipper } from '../../src/components';
+import dedent from 'dedent';
+
+import Sizes from './Examples/Sizes.mdx';
+import Colors from './Examples/Colors.mdx';
+
+export const sampleCode = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => {
+    return ( 
+        <div>
+            <ArrowUp/>
+            <ClockAlt />
+            <ArrowRight />
+            <Bell />
+            <PluginShipper />
+        </div>
+    );
+}
+`;
+
+<Section contained={true} style={{ paddingTop: 0 }}>
+	<p>
+		This is a basic example of random SVG Icons
+	</p>
+	<Preview wrapper={true}>
+		<div style={{display: "flex", gap: "20px"}}>
+			<ClockAlt />
+			<ArrowRight />
+			<Bell />
+			<PluginShipper />
+		</div>
+	</Preview>
+	<Snippet language="js">{sampleCode}</Snippet>
+</Section>
+
+
+<Section style={{ paddingTop: 0 }}>
+	<Switcher>
+		<div label="Color" value="colors">
+			<Colors />
+		</div>
+		<div label="Sizes" value="sizes">
+			<Sizes />
+		</div>
+	</Switcher>
+</Section>

packages/assets/icons/stories/content/Examples/Colors.mdx

@@ -0,0 +1,87 @@
+import { Section, Switcher, Preview, Snippet } from '@wpmudev/sui-docs';
+import { ClockAlt, ArrowRight } from '../../../src/components';
+import dedent from 'dedent';
+
+export const neutral = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt colorScheme="neutral" />;
+`;
+
+export const informative = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt colorScheme="informative" />;
+`;
+
+export const success = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt colorScheme="success" />;
+`;
+
+export const warning = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt colorScheme="warning" />;
+`;
+
+export const critical = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt colorScheme="critical" />;
+`;
+
+export const customColor = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt fill="#C756FF" />;
+`;
+
+<Section title="neutral" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt colorScheme="neutral" />
+	</Preview>
+	<Snippet language="js">{neutral}</Snippet>
+</Section>
+
+<Section title="informative" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt colorScheme="informative" />
+	</Preview>
+	<Snippet language="js">{informative}</Snippet>
+</Section>
+
+<Section title="success" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt colorScheme="success" />
+	</Preview>
+	<Snippet language="js">{success}</Snippet>
+</Section>
+
+<Section title="warning" contained={true} style={{ paddingLeft: 0 }}>
+	<Preview wrapper={true}>
+		<ClockAlt colorScheme="warning" />
+	</Preview>
+	<Snippet language="js">{warning}</Snippet>
+</Section>
+
+<Section title="critical" contained={true} style={{ paddingLeft: 0 }}>
+	<Preview wrapper={true}>
+		<ClockAlt colorScheme="critical" />
+	</Preview>
+	<Snippet language="js">{critical}</Snippet>
+</Section>
+
+<Section title="Custom Color " contained={true} style={{ paddingLeft: 0 }}>
+    <p>
+        You can also use custom colors by using `fill` property
+    </p>
+	<Preview wrapper={true}>
+		<ClockAlt fill="#C756FF" />
+	</Preview>
+	<Snippet language="js">{customColor}</Snippet>
+</Section>

packages/assets/icons/stories/content/Examples/Sizes.mdx

@@ -0,0 +1,90 @@
+import { Section, Switcher, Preview, Snippet } from '@wpmudev/sui-docs';
+import { ClockAlt, ArrowRight } from '../../../src/components';
+import dedent from 'dedent';
+
+export const xs = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt size="sm" />;
+`;
+
+export const sm = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt size="sm" />;
+`;
+
+export const md = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt md="md" />;
+`;
+
+export const lg = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt size="lg" />;
+`;
+
+export const xl = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt size="xl" />;
+`;
+
+export const customWidth = dedent`
+import { ClockAlt } from '@wpmudev/sui-icons';
+
+const TestComponent = () => <ClockAlt iconWidth={250} iconHeight={250} />;
+`;
+
+
+<Section title="Extra Small" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt size="xs" />
+	</Preview>
+	<Snippet language="js">{xs}</Snippet>
+</Section>
+
+<Section title="Small" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt size="sm" />
+	</Preview>
+	<Snippet language="js">{sm}</Snippet>
+</Section>
+
+<Section title="Medium" contained={true} style={{ paddingLeft: 0 }}>
+
+	<Preview wrapper={true}>
+		<ClockAlt size="md" />
+	</Preview>
+	<Snippet language="js">{md}</Snippet>
+</Section>
+
+<Section title="Large" contained={true} style={{ paddingLeft: 0 }}>
+	<Preview wrapper={true}>
+		<ClockAlt size="lg" />
+	</Preview>
+	<Snippet language="js">{lg}</Snippet>
+</Section>
+
+<Section title="Extra Large" contained={true} style={{ paddingLeft: 0 }}>
+	<Preview wrapper={true}>
+		<ClockAlt size="xl" />
+	</Preview>
+	<Snippet language="js">{xl}</Snippet>
+</Section>
+
+
+<Section title="Custom Size" contained={true} style={{ paddingLeft: 0 }}>
+    <p>
+        You can also set a custom width and height by using `width` and `height` properties.
+    </p>
+	<Preview wrapper={true}>
+		<ClockAlt iconWidth={250} iconHeight={250} />
+	</Preview>
+	<Snippet language="js">{xl}</Snippet>
+</Section>
+