@tactics/toddle-styleguide 1.4.15 → 1.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/icons/outline/outline-default.preview.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
 import {Icon} from '..';
+import { Size } from '../../types/size.enum';
+import { Scale } from '../../theme/scale';
 
 export const IconOutlineDefaultPreview = ({}: {}) => {
   return (
@@ -98,6 +100,15 @@ export const IconOutlineDefaultPreview = ({}: {}) => {
           <Icon style={'regular'} name={'user-group'} />
           <Icon style={'regular'} name={'xmark'} />
         </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Icon style={'regular'} name={'share'} />
+        </View>
       </View>
     </View>
   );

package/src/icons/outline/outline.tsx

@@ -42,6 +42,7 @@ import {UserIcon as User} from './user/user.icon';
 import {UserGroupIcon as UserGroup} from './user-group/user-group.icon';
 import {UsersIcon as Users} from './users/users.icon';
 import {XMarkIcon as XMark} from './xmark/xmark.icon';
+import { ShareIcon } from './share/share.icon';
 
 export const Outline = ({
   name,
@@ -130,6 +131,8 @@ export const Outline = ({
         return <UserGroup size={size} color={color} />;
       case 'xmark':
         return <XMark size={size} color={color} />;
+      case 'share':
+        return <ShareIcon size={size} color={color} />
       default:
         alert('The icon you want is not available');
         break;

package/src/icons/outline/share/share.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const ShareIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 27 26" fill="none">
+      <Path
+        stroke={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+        d="M9.76935 14.4538C9.99692 14.0163 10.125 13.5226 10.125 13C10.125 12.4774 9.99692 11.9837 9.76935 11.5462M9.76935 14.4538C9.21525 15.5188 8.0713 16.25 6.75 16.25C4.88604 16.25 3.375 14.7949 3.375 13C3.375 11.2051 4.88604 9.75 6.75 9.75C8.0713 9.75 9.21525 10.4812 9.76935 11.5462M9.76935 14.4538L17.2306 18.0462M9.76935 11.5462L17.2306 7.95376M17.2306 7.95376C17.7847 9.01884 18.9287 9.75 20.25 9.75C22.114 9.75 23.625 8.29493 23.625 6.5C23.625 4.70507 22.114 3.25 20.25 3.25C18.386 3.25 16.875 4.70507 16.875 6.5C16.875 7.02257 17.0031 7.51633 17.2306 7.95376ZM17.2306 18.0462C17.0031 18.4837 16.875 18.9774 16.875 19.5C16.875 21.2949 18.386 22.75 20.25 22.75C22.114 22.75 23.625 21.2949 23.625 19.5C23.625 17.7051 22.114 16.25 20.25 16.25C18.9287 16.25 17.7847 16.9812 17.2306 18.0462Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/share/share.icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+import {HexColor} from '../../../models/hex-color.model';
+import {Scale} from '../../../theme/scale/index';
+
+export const ShareIcon = ({color, size = Scale.l}: IconSVGProps) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 22" fill="none">
+      <Path
+        d="M16.5 8.80001C18.3225 8.80001 19.7999 7.32255 19.7999 5.50001C19.7999 3.67747 18.3225 2.20001 16.5 2.20001C14.6774 2.20001 13.2 3.67747 13.2 5.50001C13.2 5.63804 13.2084 5.7741 13.2249 5.90768L7.7908 8.62472C7.19729 8.05217 6.38974 7.70001 5.49995 7.70001C3.67741 7.70001 2.19995 9.17747 2.19995 11C2.19995 12.8226 3.67741 14.3 5.49995 14.3C6.38976 14.3 7.19732 13.9478 7.79084 13.3753L13.2249 16.0923C13.2084 16.2259 13.2 16.362 13.2 16.5C13.2 18.3226 14.6774 19.8 16.5 19.8C18.3225 19.8 19.7999 18.3226 19.7999 16.5C19.7999 14.6775 18.3225 13.2 16.5 13.2C15.6102 13.2 14.8026 13.5522 14.2091 14.1247L8.77502 11.4077C8.79148 11.2741 8.79995 11.138 8.79995 11C8.79995 10.862 8.79147 10.7259 8.77501 10.5923L14.2091 7.87527C14.8026 8.44784 15.6101 8.80001 16.5 8.80001Z"
+        fill={
+          color ? HexColor.of(color).toString() : context.colors.main['0']
+        }
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/solid.preview.tsx

@@ -138,6 +138,7 @@ export const IconSolidPreview = ({}: {}) => {
         <Icon style={'solid'} name={'user-group'} />
         <Icon style={'solid'} name={'users'} />
         <Icon style={'solid'} name={'xmark'} />
+        <Icon style={'solid'} name={'share'} />
       </View>
     </View>
   );

package/src/icons/solid/solid.tsx

@@ -41,6 +41,7 @@ import {UserIcon as UserSolid} from './user/user.icon';
 import {UserGroupIcon as UserGroupSolid} from './user-group/user-group.icon';
 import {UsersIcon as UsersSolid} from './users/users-solid.icon';
 import {XMarkIcon as XMarkSolid} from './xmark/xmark.icon';
+import { ShareIcon } from './share/share.icon';
 
 export const Solid = ({name, size, color}: IconNameInterface): JSX.Element => {
   const renderIcon = ({name}: IconNameInterface): React.ReactNode => {
@@ -125,6 +126,8 @@ export const Solid = ({name, size, color}: IconNameInterface): JSX.Element => {
         return <UserGroupSolid size={size} color={color} />;
       case 'xmark':
         return <XMarkSolid size={size} color={color} />;
+      case 'share':
+        return <ShareIcon size={size} color={color} />
       default:
         alert('The icon you want is not available');
         break;

package/src/types/icontype.type.ts

@@ -40,4 +40,5 @@ export type IconNameType =
   | 'user'
   | 'user-group'
   | 'users'
-  | 'xmark';
+  | 'xmark'
+  | 'share';