diginet-core-ui 1.4.39 → 1.4.40

package/src/icons/general/indent/increase.js

@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Increase = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 23.434 20">
+            <g id="Group_16" data-name="Group 16" transform="translate(-1018 -1283)">
+                <path
+                    id="Path_44"
+                    data-name="Path 44"
+                    d="M307.323,67.777H286.111a1.111,1.111,0,0,0,0,2.222h21.212a1.115,1.115,0,0,0,1.111-1.111A1.1,1.1,0,0,0,307.323,67.777Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_45"
+                    data-name="Path 45"
+                    d="M307.323,63.333H297.212a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_46"
+                    data-name="Path 46"
+                    d="M307.323,58.89H297.212a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_47"
+                    data-name="Path 47"
+                    d="M286.111,52.222h21.212a1.111,1.111,0,0,0,0-2.222H286.111a1.111,1.111,0,0,0,0,2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_48"
+                    data-name="Path 48"
+                    d="M307.323,54.444H297.212a1.111,1.111,0,0,0,0,2.222h10.111a1.111,1.111,0,0,0,0-2.222Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_49"
+                    data-name="Path 49"
+                    d="M285.691,65.466a1.044,1.044,0,0,0,.42.08,1.068,1.068,0,0,0,.781-.33l4.444-4.444a1.117,1.117,0,0,0,0-1.572l-4.444-4.444a1.108,1.108,0,0,0-1.892.791v8.889A1.1,1.1,0,0,0,285.691,65.466Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Increase;

package/src/icons/general/index.js

@@ -0,0 +1,21 @@
+export { default as Clock } from './clock/clock';
+export { default as Undo } from './steps/undo';
+export { default as Redo } from './steps/redo';
+export { default as FontFamily } from './font-properties/font-family';
+export { default as FontSize } from './font-properties/font-size';
+export { default as Bold } from './font-properties/bold';
+export { default as Italic } from './font-properties/italic';
+export { default as Underline } from './font-properties/underline';
+export { default as TextColor } from './color-handler/text';
+export { default as BackgroundColor } from './color-handler/background';
+export { default as Emoji } from './emoji/emoji';
+export { default as TextAlignLeft } from './text-align/left';
+export { default as TextAlignCenter } from './text-align/center';
+export { default as TextAlignRight } from './text-align/right';
+export { default as TextAlignJustify } from './text-align/justify';
+export { default as Bullets } from './list/bullets';
+export { default as Numbering } from './list/numbering';
+export { default as Decrease } from './indent/decrease';
+export { default as Increase } from './indent/increase';
+export { default as Picture } from './picture/picture';
+export { default as Hyperlink } from './hyperlink/hyperlink';

package/src/icons/general/index.mdx

@@ -0,0 +1,68 @@
+import { Story, Props } from '@storybook/addon-docs/blocks'
+
+# Diginet-Core-Ui / General Icons
+
+This is a collection of icons which is used generally in our library.
+
+## Installation:
+
+```jsx
+npm install diginet-core-ui --save
+```
+
+<!-- ############################################################################# -->
+
+## Add
+
+The icon `<Icon />` is designed according to design guidelines of Diginet
+
+##### Usage
+
+You can use `<Icon />` by the following way, such as:
+
+```jsx
+import {
+    Clock,
+    BackgroundColor,
+    TextColor,
+    Emoji,
+    Bold,
+    Italic,
+    Underline,
+    FontFamily,
+    FontSize,
+    Undo,
+    Redo
+    TextAlignLeft,
+    TextAlignCenter,
+    TextAlignRight,
+    TextAlignJustify,
+    Bullets,
+    Numbering,
+    Increase,
+    Picture,
+    Hyperlink
+} from 'diginet-core-ui/components/icons/general'
+```
+
+##### Examples
+
+You can use `<Picture />` to display any information that you pass in, such as:
+
+```jsx
+import { Picture } from 'diginet-core-ui/components/icons/general';
+
+<Picture width={24} height={24} pathFill={color} />
+```
+
+```jsx
+import { Hyperlink } from 'diginet-core-ui/components/icons/general';
+
+<Hyperlink width={24} height={24} pathFill={color} />
+```
+
+<!-- ############################################################################# -->
+
+##### Component Example
+
+<Story id='icon--general' />

package/src/icons/general/list/bullets.js

@@ -0,0 +1,76 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Bullets = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 36.522 20">
+            <g id="Group_15" data-name="Group 15" transform="translate(-889 -1283)">
+                <g id="Group_7" data-name="Group 7" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_16"
+                        data-name="Path 16"
+                        d="M188,62.435a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L188,60.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.665.665,0,0,1,.215.135.631.631,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+                <path
+                    id="Path_23"
+                    data-name="Path 23"
+                    d="M178.554,52.221H161.543a1.111,1.111,0,0,1,0-2.221h17.011a1.111,1.111,0,0,1,0,2.221Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_24"
+                    data-name="Path 24"
+                    d="M179.664,57.043a1.114,1.114,0,0,0-1.11-1.111H161.543a1.111,1.111,0,0,0,0,2.221h17.011A1.1,1.1,0,0,0,179.664,57.043Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_25"
+                    data-name="Path 25"
+                    d="M179.664,62.966a1.114,1.114,0,0,0-1.11-1.111H161.543a1.111,1.111,0,0,0,0,2.221h17.011A1.1,1.1,0,0,0,179.664,62.966Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_26"
+                    data-name="Path 26"
+                    d="M179.664,68.889a1.114,1.114,0,0,0-1.11-1.111H161.543a1.111,1.111,0,0,0,0,2.221h17.011A1.1,1.1,0,0,0,179.664,68.889Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_27"
+                    data-name="Path 27"
+                    d="M157.1,50a1.122,1.122,0,0,0-.781.32,1.1,1.1,0,0,0-.32.78,1.123,1.123,0,0,0,.32.78,1.1,1.1,0,0,0,.781.32,1.122,1.122,0,0,0,.78-.32,1.1,1.1,0,0,0,.32-.78,1.123,1.123,0,0,0-.32-.78A1.14,1.14,0,0,0,157.1,50Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_28"
+                    data-name="Path 28"
+                    d="M157.1,55.942a1.122,1.122,0,0,0-.781.32,1.1,1.1,0,0,0-.32.78,1.123,1.123,0,0,0,.32.78,1.1,1.1,0,0,0,.781.32,1.122,1.122,0,0,0,.78-.32,1.1,1.1,0,0,0,.32-.78,1.123,1.123,0,0,0-.32-.78A1.1,1.1,0,0,0,157.1,55.942Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_29"
+                    data-name="Path 29"
+                    d="M157.1,61.866a1.122,1.122,0,0,0-.781.32,1.1,1.1,0,0,0-.32.78,1.123,1.123,0,0,0,.32.78,1.1,1.1,0,0,0,.781.32,1.122,1.122,0,0,0,.78-.32,1.1,1.1,0,0,0,.32-.78,1.123,1.123,0,0,0-.32-.78A1.1,1.1,0,0,0,157.1,61.866Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_30"
+                    data-name="Path 30"
+                    d="M157.1,67.789a1.122,1.122,0,0,0-.781.32,1.1,1.1,0,0,0-.32.78,1.123,1.123,0,0,0,.32.78,1.1,1.1,0,0,0,.781.32,1.122,1.122,0,0,0,.78-.32,1.1,1.1,0,0,0,.32-.78,1.123,1.123,0,0,0-.32-.78A1.1,1.1,0,0,0,157.1,67.789Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Bullets;

package/src/icons/general/list/numbering.js

@@ -0,0 +1,69 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Bullets = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 37.522 19.999">
+            <g id="Group_14" data-name="Group 14" transform="translate(-937 -1283)">
+                <g id="Group_8" data-name="Group 8" transform="translate(733 1233)" clipPath="url(#clip-path)">
+                    <path
+                        id="Path_17"
+                        data-name="Path 17"
+                        d="M237,62.435a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L237,60.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.665.665,0,0,1,.215.135.631.631,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z"
+                        fill={pathFill}
+                    />
+                </g>
+                <path
+                    id="Path_31"
+                    data-name="Path 31"
+                    d="M205.328,51.9v2.777a.571.571,0,0,0,1.139,0V50.52a.529.529,0,0,0-.549-.52.554.554,0,0,0-.45.24.01.01,0,0,1-.01.01l-.469.679a.673.673,0,0,0-.18.42A.542.542,0,0,0,205.328,51.9Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_32"
+                    data-name="Path 32"
+                    d="M204.569,62.588h2.178a.545.545,0,0,0,.52-.559.536.536,0,0,0-.52-.549h-1.578v-.01c0-.17.379-.43.689-.649.609-.43,1.369-.959,1.369-1.888a1.527,1.527,0,0,0-1.589-1.538,1.423,1.423,0,0,0-1.518,1.379.566.566,0,1,0,1.129.09c0-.16.039-.35.369-.35a.43.43,0,0,1,.46.44c0,.35-.46.679-.9,1-.55.39-1.169.839-1.169,1.528v.589A.55.55,0,0,0,204.569,62.588Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_33"
+                    data-name="Path 33"
+                    d="M207.147,66.213a1.331,1.331,0,0,0-1.479-1.439,1.4,1.4,0,0,0-1.558,1.349.537.537,0,0,0,.579.6.53.53,0,0,0,.56-.56c0-.13.05-.28.409-.28.26,0,.36.04.36.41s-.08.41-.39.41a.518.518,0,0,0-.519.549.523.523,0,0,0,.529.539c.41,0,.49.17.49.44v.12c0,.45-.18.539-.5.539-.449,0-.489-.23-.489-.3a.57.57,0,0,0-1.139.04A1.474,1.474,0,0,0,205.618,70a1.515,1.515,0,0,0,1.639-1.648v-.12a1.442,1.442,0,0,0-.39-1.029A1.671,1.671,0,0,0,207.147,66.213Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_34"
+                    data-name="Path 34"
+                    d="M227.574,52.218h-16.98a1.109,1.109,0,1,1,0-2.218h16.98a1.109,1.109,0,1,1,0,2.218Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_35"
+                    data-name="Path 35"
+                    d="M228.683,57.033a1.113,1.113,0,0,0-1.109-1.109h-16.98a1.109,1.109,0,1,0,0,2.218h16.98A1.1,1.1,0,0,0,228.683,57.033Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_36"
+                    data-name="Path 36"
+                    d="M228.683,62.947a1.113,1.113,0,0,0-1.109-1.109h-16.98a1.109,1.109,0,1,0,0,2.218h16.98A1.1,1.1,0,0,0,228.683,62.947Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+                <path
+                    id="Path_37"
+                    data-name="Path 37"
+                    d="M228.683,68.861a1.113,1.113,0,0,0-1.109-1.109h-16.98a1.109,1.109,0,1,0,0,2.218h16.98A1.1,1.1,0,0,0,228.683,68.861Z"
+                    transform="translate(733 1233)"
+                    fill={pathFill}
+                />
+            </g>
+        </svg>
+    );
+};
+export default Bullets;

package/src/icons/general/picture/picture.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Picture = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 21.39 20">
+            <path
+                id="Path_50"
+                data-name="Path 50"
+                d="M347.39,50.93a.935.935,0,0,0-.93-.93H326.93a.935.935,0,0,0-.93.93V69.07a.935.935,0,0,0,.93.93h19.53a.935.935,0,0,0,.93-.93Zm-1.86.93v9.67l-1.56-1.31a.923.923,0,0,0-1.19,0l-2.5,2.08-5.83-5.07a.936.936,0,0,0-1.2-.02l-5.38,4.36V51.86ZM327.86,68.14V63.96l5.94-4.82,5.84,5.07a.924.924,0,0,0,1.2.01l2.51-2.09,2.16,1.81v4.19H327.86Zm10.25-11.25a1.73,1.73,0,1,1,1.73,1.7A1.718,1.718,0,0,1,338.11,56.89Z"
+                transform="translate(-326 -50)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Picture;

package/src/icons/general/steps/redo.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Redo = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 18.77 16.871">
+            <path
+                id="Path_57"
+                data-name="Path 57"
+                d="M58.11,28.64a.991.991,0,0,0,.21-1.29A7.993,7.993,0,0,1,70.35,17H67.77a1,1,0,0,0,0,2h5a1,1,0,0,0,1-1V13a1,1,0,0,0-2,0v2.57l-.02.01A10,10,0,0,0,56.63,28.42,1.006,1.006,0,0,0,58.11,28.64Z"
+                transform="translate(-55 -12)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Redo;

package/src/icons/general/steps/undo.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Undo = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 18.77 16.871">
+            <path
+                id="Path_58"
+                data-name="Path 58"
+                d="M38.89,28.64a.991.991,0,0,1-.21-1.29A7.993,7.993,0,0,0,26.65,17h2.58a1,1,0,1,1,0,2h-5a1,1,0,0,1-1-1V13a1,1,0,0,1,2,0v2.57l.02.01A10,10,0,0,1,40.37,28.42,1.006,1.006,0,0,1,38.89,28.64Z"
+                transform="translate(-23.23 -12)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Undo;

package/src/icons/general/text-align/center.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Center = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 22.231 20">
+            <path
+                id="Path_56"
+                data-name="Path 56"
+                d="M74.12,52.221H54.111a1.111,1.111,0,0,1,0-2.221H74.12a1.111,1.111,0,1,1,0,2.221Zm-3.142,4.822a1.115,1.115,0,0,0-1.111-1.111H58.363a1.111,1.111,0,0,0,0,2.221H69.868A1.1,1.1,0,0,0,70.979,57.043Zm1.691,5.933a1.115,1.115,0,0,0-1.111-1.111h-14.9a1.111,1.111,0,1,0,0,2.221h14.9A1.108,1.108,0,0,0,72.67,62.976Zm2.021,5.913a1.114,1.114,0,0,0-1.111-1.11H54.641a1.111,1.111,0,0,0,0,2.221H73.58A1.1,1.1,0,0,0,74.691,68.889Z"
+                transform="translate(-53 -50)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Center;

package/src/icons/general/text-align/justify.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Justify = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 22.241 20">
+            <path
+                id="Path_22"
+                data-name="Path 22"
+                d="M138.12,52.221H118.111a1.111,1.111,0,1,1,0-2.221H138.12a1.111,1.111,0,1,1,0,2.221Zm1.121,4.822a1.114,1.114,0,0,0-1.111-1.111H118.121a1.111,1.111,0,1,0,0,2.221H138.13A1.1,1.1,0,0,0,139.241,57.043Zm0,5.923a1.114,1.114,0,0,0-1.111-1.111H118.121a1.111,1.111,0,1,0,0,2.221H138.13A1.1,1.1,0,0,0,139.241,62.966Zm-10.025,5.923a1.114,1.114,0,0,0-1.111-1.11h-9.914a1.111,1.111,0,1,0,0,2.221H128.1A1.1,1.1,0,0,0,129.216,68.889Z"
+                transform="translate(-117 -50)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Justify;

package/src/icons/general/text-align/left.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Left = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 22.231 20">
+            <path
+                id="Path_20"
+                data-name="Path 20"
+                d="M42.12,52.221H22.111a1.111,1.111,0,0,1,0-2.221H42.12a1.111,1.111,0,1,1,0,2.221Zm-7.394,4.822a1.115,1.115,0,0,0-1.111-1.111H22.111a1.111,1.111,0,0,0,0,2.221H33.616A1.1,1.1,0,0,0,34.727,57.043Zm3.392,5.933a1.114,1.114,0,0,0-1.111-1.111h-14.9a1.111,1.111,0,0,0,0,2.221h14.9A1.114,1.114,0,0,0,38.118,62.976Zm4.112,5.913a1.114,1.114,0,0,0-1.111-1.11H22.181a1.111,1.111,0,1,0,0,2.221H41.12A1.1,1.1,0,0,0,42.23,68.889Z"
+                transform="translate(-21 -50)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Left;

package/src/icons/general/text-align/right.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+const Right = ({ width = '1em', height = '1em', pathFill = 'currentColor' }) => {
+    return (
+        <svg width={width} height={height} viewBox="0 0 22.231 20">
+            <path
+                id="Path_21"
+                data-name="Path 21"
+                d="M106.12,52.221H86.11a1.111,1.111,0,0,1,0-2.221h20.01a1.111,1.111,0,1,1,0,2.221Zm1.111,4.822a1.114,1.114,0,0,0-1.111-1.111H94.615a1.111,1.111,0,0,0,0,2.221H106.12A1.1,1.1,0,0,0,107.231,57.043Zm0,5.923a1.114,1.114,0,0,0-1.111-1.111h-14.9a1.111,1.111,0,1,0,0,2.221h14.9A1.1,1.1,0,0,0,107.231,62.966Zm-.07,5.923a1.114,1.114,0,0,0-1.111-1.11H87.111a1.111,1.111,0,0,0,0,2.221H106.05A1.1,1.1,0,0,0,107.161,68.889Z"
+                transform="translate(-85 -50)"
+                fill={pathFill}
+            />
+        </svg>
+    );
+};
+export default Right;

package/src/icons/index.js

@@ -0,0 +1,3 @@
+export * from './basic';
+import Icon from './effect';
+export default Icon;

package/src/icons/index.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { Icon } from './effect';
+
+export default {
+    title: 'Components/Icon',
+    component: Icon,
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Icon'} />
+            <Icon {...args} />
+        </>
+    );
+};
+
+export const ComponentIcon = Template.bind({});
+ComponentIcon.args = {
+    name: 'Add',
+};