Merge branch 'master' of https://github.com/commonsku/commonsku-styles

src/@commonsku/styles/Select.md

@@ -2,5 +2,13 @@ Select example:
 
 ```js
 import { LabeledSelect } from './Select';
-<LabeledSelect label="Labeled Select" name="events" noMargin options={[{ value: 'skucon', label: 'Skucon' }, { value: 'skucamp', label: 'Skucamp' }, { value: 'others', label: 'Others' }]} />
+import { find } from 'lodash';
+
+const options = [{ value: 'skucon', label: 'Skucon' }, { value: 'skucamp', label: 'Skucamp' }, { value: 'others', label: 'Others' }]
+
+<LabeledSelect 
+  label="Labeled Select" name="events" noMargin
+  value={find(options, { value: 'skucon' })}
+  options={options} 
+/>
 ```

src/@commonsku/styles/icons/Loading.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { generateColor } from "../../utils";
+import { colors } from "../Theme";
+import { SharedStyleTypes } from "../SharedStyles";
+import SVG from "./SVG";
+
+
+function Loading({
+    height = 50,
+    width,
+    animationDuration = 1000,
+    barWidth = 14,
+    barRadius = 2,
+    colorful = false,
+    bars = 4,
+    viewBox = "10 0 51 50",
+    rotate=false,
+    startColor,
+    endColor,
+    ...props
+}: {
+    height?: number,
+    width?: number,
+    animationDuration?: number,
+    barWidth?: number,
+    barRadius?: number,
+    colorful?: boolean,
+    bars?: number,
+    viewBox?: string,
+    startColor?: string,
+    endColor?: string,
+} & SharedStyleTypes) {
+    const colorGradient = colorful
+        ? generateColor(startColor || colors.special1, endColor || colors.primary, bars)
+        : generateColor(startColor || colors.primary, endColor || colors.primary0, bars);
+
+    const generateBar = (v: number) => {
+        return (
+            <rect
+                key={`bar_${v}`}
+                x={19 * v}
+                y="0"
+                width={barWidth || 14}
+                height={height}
+                fill={`#${colorGradient[v]}`}
+                rx={barRadius}
+            >
+                <animate
+                    attributeName="height"
+                    values="50;10;50"
+                    begin={`${v * 0.2}s`}
+                    dur={`${animationDuration / 1000}s`}
+                    repeatCount="indefinite"
+                />
+            </rect>
+        );
+    };
+
+    const generateBars = () => {
+        const result = [];
+        for (let i = 0; i < bars; i++) {
+          result.push(generateBar(i));
+        }
+        return result;
+    };
+
+    return (
+        <SVG
+            width={width ? `${width}px` : "100%"}
+            height={height ? `${height}px` : "100%"}
+            viewBox={viewBox}
+            transform="scale(1, -1) translate(0, -1)"
+            {...props}
+        >{generateBars()}</SVG>
+    );
+}
+
+export default Loading;

src/@commonsku/styles/icons/index.ts

@@ -8,4 +8,4 @@ export * from './CalendarIcon';
 export * from './CouponIcon';
 export * from './InfoIcon';
 export * from './LockIcon';
-export * from './BarsLoadingIcon';
+export { default as Loading } from './Loading';

src/@commonsku/utils/generateColor.ts

@@ -0,0 +1,50 @@
+
+function hex(c: number) {
+    const s = "0123456789abcdef";
+    let i = parseInt(c + '');
+    if (i === 0 || isNaN(c)) return "00";
+    i = Math.round(Math.min(Math.max(0, i), 255));
+    return s.charAt((i - (i % 16)) / 16) + s.charAt(i % 16);
+}
+
+/* Convert an RGB triplet to a hex string */
+function convertToHex(rgb: number[]) {
+    return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
+}
+
+/* Remove '#' in color hex string */
+function trim(s: string) {
+    return s.charAt(0) === "#" ? s.substring(1, 7) : s;
+}
+
+/* Convert a hex string to an RGB triplet */
+function convertToRGB(hex: string) {
+    const color = [];
+    color[0] = parseInt(trim(hex).substring(0, 2), 16);
+    color[1] = parseInt(trim(hex).substring(2, 4), 16);
+    color[2] = parseInt(trim(hex).substring(4, 6), 16);
+    return color;
+}
+
+function generateColor(colorStart: string, colorEnd: string, colorCount: number) {
+    // The beginning of your gradient
+    const start = convertToRGB(colorStart);
+    // The end of your gradient
+    const end = convertToRGB(colorEnd);
+    // The number of colors to compute
+    const len = colorCount;
+    //Alpha blending amount
+    let alpha = 0.0;
+    const saida = [];
+    for (let i = 0; i < len; i++) {
+        var c = [];
+        alpha += 1.0 / len;
+        c[0] = start[0] * alpha + (1 - alpha) * end[0];
+        c[1] = start[1] * alpha + (1 - alpha) * end[1];
+        c[2] = start[2] * alpha + (1 - alpha) * end[2];
+        saida.push(convertToHex(c));
+    }
+    return saida;
+}
+
+export default generateColor

src/@commonsku/utils/index.ts

@@ -1,5 +1,6 @@
 import ssr from './ssr';
 export * from './sizes';
+export { default as generateColor } from './generateColor';
 
 export const valIsValid = (val: any) => val !== null && val !== undefined && val !== ''; // not checking for 0
 

src/App.tsx

@@ -14,7 +14,7 @@ import user_pic3 from './users/3.jpeg';
 import user_pic4 from './users/4.jpeg';
 import user_pic5 from './users/5.jpeg';
 
-import { BarsLoadingIcon, LockIcon, InfoIcon, CouponIcon } from './@commonsku/styles/icons';
+import { Loading, LockIcon, InfoIcon, CouponIcon } from './@commonsku/styles/icons';
 
 import { 
     Avatar, 
@@ -92,6 +92,7 @@ const App = () => {
   const [mustard, toggleMustard] = useState(false);
   const [ketchup, toggleKetchup] = useState(false);
   const [lock, setLock] = useState(false);
+  const [colorfulBars, setColorfulBars] = useState(false);
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -154,7 +155,15 @@ const App = () => {
 
 
             <H5>Bars Loading</H5>
-            <BarsLoadingIcon mb={10} block />
+            <div style={{maxWidth: 150}}>
+              <Toggle stretch mb={10} onClick={() => setColorfulBars(!colorfulBars)}>
+                <ToggleLink selected={!colorfulBars} stretch pr pl>Regular</ToggleLink>
+                <ToggleLink selected={colorfulBars} stretch>Colorful</ToggleLink>
+              </Toggle>
+            </div>
+            <div style={{maxWidth: 90}}>
+              <Loading mb={10} colorful={colorfulBars} />
+            </div>
 
             <Link><CouponIcon color={"red"} width={"1.5rem"} mr={5}/>Link</Link>
             <InfoIcon ml={5}/>