@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/CircularLoader/CircularLoader.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._CircularLoader = void 0;
+var React = _interopRequireWildcard(require("react"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
+var _CircularLoader2 = require("./CircularLoader");
+var _CircularLoaderStoriesModule = _interopRequireDefault(require("./CircularLoader.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const colorOptions = [...Object.keys(COLORS).filter(color => color.startsWith('colorText'))];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Circular Loader',
+  component: _CircularLoader2.CircularLoader,
+  argTypes: {
+    size: {
+      description: 'Circular Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
+      options: ['large', 'medium', 'small'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    colorToken: {
+      description: 'Pass different text color token string to show loader in different color',
+      options: colorOptions,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'colorTextClickable'
+        }
+      }
+    },
+    className: {
+      description: 'External className to be applied',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Circular Loader component',
+      description: {
+        component: `
+\`\`\`js
+import { CircularLoader } from "@spaced-out/ui-design-system/lib/components/CircularLoader";
+\`\`\`
+Circular loaders can be used to show infinite loading state. For **Linear Loader**
+check **<a href="../?path=/docs/components-linear-loader--docs">here</a>**
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/CircularLoader/CircularLoader.jsx'
+    }
+  }
+};
+const _CircularLoader = args => /*#__PURE__*/React.createElement("div", {
+  className: _CircularLoaderStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_CircularLoader2.CircularLoader, args));
+exports._CircularLoader = _CircularLoader;

package/lib/components/CircularLoader/CircularLoader.stories.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import * as COLORS from '../../styles/variables/_color';
+
+import type {CircularLoaderProps} from './CircularLoader';
+import {CircularLoader} from './CircularLoader';
+
+import css from './CircularLoader.stories.module.css';
+
+
+const colorOptions: Array<unknown> = [
+  ...Object.keys(COLORS).filter((color) => color.startsWith('colorText')),
+];
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Circular Loader',
+  component: CircularLoader,
+  argTypes: {
+    size: {
+      description:
+        'Circular Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
+      options: ['large', 'medium', 'small'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'medium'},
+      },
+    },
+    colorToken: {
+      description:
+        'Pass different text color token string to show loader in different color',
+      options: colorOptions,
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'colorTextClickable'},
+      },
+    },
+    className: {
+      description: 'External className to be applied',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Circular Loader component',
+      description: {
+        component: `
+\`\`\`js
+import { CircularLoader } from "@spaced-out/ui-design-system/lib/components/CircularLoader";
+\`\`\`
+Circular loaders can be used to show infinite loading state. For **Linear Loader**
+check **<a href="../?path=/docs/components-linear-loader--docs">here</a>**
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/CircularLoader/CircularLoader.jsx',
+    },
+  },
+};
+
+export const _CircularLoader = (args: CircularLoaderProps) => (<div className={css.storyContainer}>
+  <CircularLoader {...args} />
+</div>);

package/lib/components/CircularLoader/CircularLoader.tsx

@@ -0,0 +1,51 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import * as COLORS from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+
+import css from './CircularLoader.module.css';
+
+
+export type CircularLoaderProps = {
+  size?: 'large' | 'medium' | 'small';
+  className?: string;
+  ariaLabel?: string;
+  // TODO: update it to permissible colors
+  colorToken?: keyof typeof COLORS;
+};
+
+export const CircularLoader: Flow.AbstractComponent<CircularLoaderProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, CircularLoaderProps>((
+  {
+    size = 'medium',
+    className,
+    colorToken = 'colorTextClickable',
+    ariaLabel = 'Loading',
+  }: CircularLoaderProps,
+  ref,
+) => (<div
+  className={classify(
+    css.container,
+    {
+      [css.mediumContainer]: size === 'medium',
+      [css.smallContainer]: size === 'small',
+    },
+    className,
+  )}
+  ref={ref}
+  aria-label={ariaLabel}
+  role="alert"
+  aria-busy="true"
+>
+  <div className={css.spinLoader} aria-hidden="true">
+    <div
+      className={css.outerCircle}
+      style={{'--color': COLORS[colorToken]}}
+    ></div>
+    <div
+      className={css.ellipse}
+      style={{'--color': COLORS[colorToken]}}
+    ></div>
+  </div>
+</div>));

package/lib/components/CircularLoader/index.d.ts

@@ -0,0 +1,2 @@
+export { CircularLoader } from './CircularLoader';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CircularLoader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CircularLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC"}

package/lib/components/CircularLoader/index.ts

@@ -0,0 +1 @@
+export {CircularLoader} from './CircularLoader';

package/lib/components/CollapsibleCard/CollapsibleCard.d.ts

@@ -0,0 +1,40 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { IconType } from '../Icon';
+export declare const COLLAPSIBLE_CARD_SEMANTIC: Readonly<{
+    neutral: "neutral";
+    success: "success";
+    information: "information";
+    warning: "warning";
+    danger: "danger";
+}>;
+type ClassNames = Readonly<{
+    wrapper?: string;
+    title?: string;
+    content?: string;
+}>;
+export type CollapsibleCardSemanticType = typeof COLLAPSIBLE_CARD_SEMANTIC[keyof typeof COLLAPSIBLE_CARD_SEMANTIC];
+export type CollapsibleCardProps = {
+    id?: string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    classNames?: ClassNames;
+    isOpen?: boolean;
+    headerIconName?: string;
+    headerIconType?: IconType;
+    semantic?: CollapsibleCardSemanticType;
+    onChange?: ((e: React.SyntheticEvent<HTMLElement>, isOpen: boolean, id?: string) => unknown) | null | undefined;
+};
+export type CollapsibleCardActionProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const CollapsibleCardAction: ({ children, className, }: CollapsibleCardActionProps) => React.JSX.Element;
+export type CollapsibleCardContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const CollapsibleCardContent: ({ children, className, }: CollapsibleCardActionProps) => React.JSX.Element;
+export declare const CollapsibleCard: Flow.AbstractComponent<CollapsibleCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=CollapsibleCard.d.ts.map

package/lib/components/CollapsibleCard/CollapsibleCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleCard.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleCard/CollapsibleCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtC,eAAO,MAAM,yBAAyB;;;;;;EAMpC,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG,OAAO,yBAAyB,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAC;AAEnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACjH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,0BAGG,0BAA0B,sBACkD,CAAC;AAElF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,0BAGG,0BAA0B,sBACmD,CAAC;AAEnF,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAAC,oBAAoB,EAAE,cAAc,CAqEvF,CAAC"}

package/lib/components/CollapsibleCard/CollapsibleCard.stories.d.ts

@@ -0,0 +1,225 @@
+import * as React from 'react';
+import type { CollapsibleCardProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<CollapsibleCardProps, HTMLDivElement>;
+    argTypes: {
+        semantic: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: "neutral";
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        isOpen: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        headerIconName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        headerIconType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: CollapsibleCardProps): React.JSX.Element;
+    args: {
+        title: string;
+        classNames: {
+            wrapper: string;
+        };
+    };
+};
+export declare const _WithAction: {
+    (args: CollapsibleCardProps): React.JSX.Element;
+    args: {
+        title: string;
+        classNames: {
+            wrapper: string;
+        };
+    };
+};
+/**
+ * Usage:
+ *
+```jsx
+
+const ActionableHeader = (): React.ReactNode => (
+  <div className={css.cardHeader}>
+    <SubTitleSmall>Accordion Title</SubTitleSmall>
+    <ClickableIcon
+      name="plus"
+      color="secondary"
+      size="small"
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    ></ClickableIcon>
+  </div>
+);
+
+export const _WithHeaderActionSlots = (
+  args: CollapsibleCardProps,
+): React.ReactNode => (
+  <div className={css.container}>
+    <CollapsibleCard {...args} title={<ActionableHeader />}>
+      <CollapsibleCardContent>
+        <div className={css.acContent}>
+          <BodySmall>
+            This section has been populated using CollapsibleCardContent
+          </BodySmall>
+        </div>
+      </CollapsibleCardContent>
+      <CollapsibleCardAction className={css.action}>
+        <Button type="tertiary" isFluid>
+          Button Text
+        </Button>
+        <Button type="secondary" isFluid>
+          Button Text
+        </Button>
+      </CollapsibleCardAction>
+    </CollapsibleCard>
+  </div>
+);
+```
+
+```css
+  .cardHeader {
+    width: sizeFluid;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+```
+ *
+ */
+export declare const _WithHeaderActionSlots: {
+    (args: CollapsibleCardProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+    };
+};
+export declare const _WithIcon: {
+    (args: CollapsibleCardProps): React.JSX.Element;
+    args: {
+        title: string;
+        classNames: {
+            wrapper: string;
+        };
+        headerIconName: string;
+        semantic: string;
+    };
+};
+//# sourceMappingURL=CollapsibleCard.stories.d.ts.map

package/lib/components/CollapsibleCard/CollapsibleCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleCard/CollapsibleCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAe7C,wBA+HE;AAEF,eAAO,MAAM,QAAQ;WAAU,oBAAoB;;;;;;;CAU5C,CAAC;AAOR,eAAO,MAAM,WAAW;WAAU,oBAAoB;;;;;;;CAkB/C,CAAC;AAoBR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,sBAAsB;WAAU,oBAAoB;;;;;;CAkB1D,CAAC;AAMR,eAAO,MAAM,SAAS;WAAU,oBAAoB;;;;;;;;;CAmB7C,CAAC"}