@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/RadioButton/RadioGroup.stories.js

@@ -1,317 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._RadioGroupVertical = exports._RadioGroupHorizontalFluid = exports._RadioGroupHorizontal = exports._CustomRadioButton = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Avatar = require("../Avatar");
-var _Text = require("../Text");
-var _Truncate = require("../Truncate");
-var _RadioButton = require("./RadioButton");
-var _RadioGroup = require("./RadioGroup");
-var _RadioGroupStoriesModule = _interopRequireDefault(require("./RadioGroup.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); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-//This is controlled radio group, meaning there is an external state that determines if it is checked, the component does not manages its own state.
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Form Components/Radio Group',
-  component: _RadioGroup.RadioGroup,
-  argTypes: {
-    align: {
-      description: 'Pass the alignment string. Make sure to wrap the checkbox in a container with fixed width to get the alignment effect',
-      options: ['vertical', 'horizontal-fixed', 'horizontal-fluid'],
-      table: {
-        defaultValue: {
-          summary: 'vertical'
-        }
-      },
-      control: 'select'
-    },
-    // controlled value prop
-    value: {
-      name: 'value',
-      description: 'Specify the value that is currently selected in the group',
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: 'sample'
-        }
-      },
-      control: {
-        disable: true
-      }
-    },
-    error: {
-      name: 'error',
-      description: `Error state on group level. Meaning that, if true all the child radio buttons will be shown in error state.
-      If you just want few of the radio buttons to be in error state then pass error prop as true to the individual radio buttons`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    },
-    errorText: {
-      description: 'Error message to show in the bottom of RadioGroup in case of error state',
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    children: {
-      type: {
-        required: true
-      },
-      description: 'Provide a collection of RadioButton components to render in the group',
-      table: {
-        type: {
-          summary: 'React.Component | string'
-        }
-      }
-    },
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper, radioGroup or errorText',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, radioGroup?: string, errorText?: string}'
-        }
-      }
-    },
-    name: {
-      description: 'Specify the name of the underlying `input` nodes',
-      type: {
-        required: true
-      }
-    },
-    onChange: {
-      description: 'The callback function that is triggered when the state changes',
-      action: 'changed',
-      type: {
-        summary: '(string) => mixed'
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a RadioGroup component',
-      description: {
-        component: `
-\`\`\`js
-import { RadioGroup, RadioButton } from "@spaced-out/ui-design-system/lib/components/RadioButton";
-\`\`\`
-Radios are used when only one choice may be selected in a series of options.
-
-RadioGroup component will have multiple RadioButton children.
-
-It is a controlled component, meaning that, you need to pass the value to Radio Group.
-Internally the value passed to RadioGroup is passed down to children RadioButtons as selectedValue.
-You will pass a callback function in onChange prop, if any child RadioButton is clicked this function will be called and you will receive
-the new value which will the value prop of the clicked RadioButton.
-
-Refer the <a href="../?path=/docs/form-components-radio-button--docs">RadioButton</a> documentation here.
-        `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/RadioButton/RadioGroup.jsx'
-    }
-  }
-};
-const _RadioGroupVertical = args => {
-  const [value, setValue] = React.useState(args.value);
-  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = function () {
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...arguments);
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...arguments);
-  };
-  return /*#__PURE__*/React.createElement(_RadioGroup.RadioGroup, _extends({}, args, {
-    onChange: onChangeHandler,
-    value: value
-  }), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '1'
-  }, "Option #1"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '2'
-  }, "Option #2"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '3'
-  }, "Option #3"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '4'
-  }, "Option #4"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '5'
-  }, "Option #5"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '6'
-  }, "Option #6"));
-};
-exports._RadioGroupVertical = _RadioGroupVertical;
-_RadioGroupVertical.args = {
-  error: false,
-  align: 'vertical',
-  name: 'radio-group-1',
-  errorText: '*A selection must be made to continue'
-};
-const _RadioGroupHorizontal = args => {
-  const [value, setValue] = React.useState(args.value);
-  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = function () {
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...arguments);
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...arguments);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _RadioGroupStoriesModule.default.horizontalContainer
-  }, /*#__PURE__*/React.createElement(_RadioGroup.RadioGroup, _extends({}, args, {
-    onChange: onChangeHandler,
-    value: value
-  }), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '1'
-  }, "Option #1 Option #1"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '2'
-  }, "Option #2 Option #2 Option #2"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '3',
-    disabled: true
-  }, "Option #3"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '4'
-  }, "Option #4"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '5'
-  }, "Option #5 Option #5"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '6'
-  }, "Option #6")));
-};
-exports._RadioGroupHorizontal = _RadioGroupHorizontal;
-_RadioGroupHorizontal.args = {
-  error: false,
-  align: 'horizontal-fixed',
-  name: 'radio-group-2',
-  errorText: '*A selection must be made to continue'
-};
-const _RadioGroupHorizontalFluid = args => {
-  const [value, setValue] = React.useState(args.value);
-  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = function () {
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...arguments);
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...arguments);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _RadioGroupStoriesModule.default.horizontalFluidContainer
-  }, /*#__PURE__*/React.createElement(_RadioGroup.RadioGroup, _extends({}, args, {
-    onChange: onChangeHandler,
-    value: value
-  }), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '1'
-  }, "The Walt Disney Company"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '2'
-  }, "Nintendo"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '3'
-  }, "Starbucks"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '4'
-  }, "General Electric"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '5'
-  }, "The Walt Disney Company 2"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '6'
-  }, "IBM"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '7'
-  }, "Bank of America"), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '8'
-  }, "Apple "), /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-    value: '9'
-  }, "eBay")));
-};
-exports._RadioGroupHorizontalFluid = _RadioGroupHorizontalFluid;
-_RadioGroupHorizontalFluid.args = {
-  error: false,
-  name: 'radio-group-3',
-  align: 'horizontal-fluid',
-  errorText: '*A selection must be made to continue'
-};
-function getRandomProperty(obj) {
-  const keys = Object.keys(obj);
-  return keys[Math.floor(Math.random() * keys.length)];
-}
-const sampleOptions = [{
-  value: '1',
-  label: 'The Walt Disney Company'
-}, {
-  value: '2',
-  label: 'Nintendo',
-  imageSrc: 'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png'
-}, {
-  value: '3',
-  label: 'Starbucks'
-}, {
-  value: '4',
-  label: 'General Electric'
-}, {
-  value: '5',
-  label: 'Zee Entertainment Enterprises'
-}, {
-  value: '6',
-  label: 'IBM'
-}, {
-  value: '7',
-  label: 'Bank of America'
-}, {
-  value: '8',
-  label: 'eBay'
-}];
-const _CustomRadioButton = args => {
-  const [value, setValue] = React.useState(args.value);
-  // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = function () {
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...arguments);
-    // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...arguments);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _RadioGroupStoriesModule.default.horizontalFluidContainer
-  }, /*#__PURE__*/React.createElement(_RadioGroup.RadioGroup, _extends({}, args, {
-    onChange: onChangeHandler,
-    value: value
-  }), sampleOptions.map(_ref => {
-    let {
-      label,
-      value
-    } = _ref;
-    return /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
-      value: value,
-      classNames: {
-        label: _RadioGroupStoriesModule.default.radioLabel
-      },
-      key: value
-    }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-      iconType: "regular",
-      size: "small",
-      text: label
-      // @ts-ignore - TS2769 - No overload matches this call.
-      ,
-      color: getRandomProperty(_Avatar.AVATAR_COLOR)
-    }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
-      color: "secondary"
-    }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label)));
-  })));
-};
-exports._CustomRadioButton = _CustomRadioButton;
-_RadioGroupHorizontalFluid.args = {
-  error: false,
-  name: 'radio-group-3',
-  align: 'horizontal-fluid',
-  errorText: '*A selection must be made to continue'
-};

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

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

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

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

package/lib/components/RadioTile/RadioTile.d.ts

@@ -1,23 +0,0 @@
-import { Flow } from 'flow-to-typescript-codemod';
-import * as React from 'react';
-import type { AlertSemanticType } from '../../types/common';
-import type { IconSize, IconType } from '../Icon';
-type ClassNames = Readonly<{
-    wrapper?: string;
-}>;
-export type RadioTileProps = {
-    id: string;
-    classNames?: ClassNames;
-    semantic?: AlertSemanticType;
-    header?: string;
-    description?: string;
-    chipItems?: Array<string>;
-    onTileClick?: (e: React.SyntheticEvent<HTMLElement>, id: string) => void;
-    iconName?: string;
-    iconSize?: IconSize;
-    iconType?: IconType;
-    isSelected?: boolean;
-};
-export declare const RadioTile: Flow.AbstractComponent<RadioTileProps, HTMLDivElement>;
-export {};
-//# sourceMappingURL=RadioTile.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RadioTile.d.ts","sourceRoot":"","sources":["../../../src/components/RadioTile/RadioTile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAK1D,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAC;AAQhD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAuE3E,CAAC"}

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

@@ -1,171 +0,0 @@
-import * as React from 'react';
-import type { RadioTileProps } from './';
-declare const _default: {
-    tags: string[];
-    title: string;
-    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<RadioTileProps, HTMLDivElement>;
-    argTypes: {
-        id: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        header: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        description: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        chipItems: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        isSelected: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        onTileClick: {
-            description: string;
-            action: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        iconName: {
-            description: string;
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        semantic: {
-            description: string;
-            options: unknown[];
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                    defaultValue: {
-                        summary: "neutral";
-                    };
-                };
-            };
-        };
-        iconSize: {
-            description: string;
-            control: {
-                type: string;
-            };
-            options: unknown[];
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: "medium";
-                };
-            };
-        };
-        iconType: {
-            description: string;
-            control: {
-                type: string;
-            };
-            options: unknown[];
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: "solid";
-                };
-            };
-        };
-        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 _RadioTile: {
-    (args: RadioTileProps): React.JSX.Element;
-    args: {
-        header: string;
-        description: string;
-        chipItems: string[];
-        iconName: string;
-        semantic: string;
-        iconType: string;
-    };
-};
-export declare const _RadioTileGroup: {
-    (args: RadioTileProps): React.JSX.Element;
-    args: {
-        iconSize: string;
-        iconType: string;
-    };
-};
-//# sourceMappingURL=RadioTile.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RadioTile.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioTile/RadioTile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUvC,wBAiKE;AAEF,eAAO,MAAM,UAAU;WAAU,cAAc;;;;;;;;;CAqB9C,CAAC;AAWF,eAAO,MAAM,eAAe;WAAU,cAAc;;;;;CA2DnD,CAAC"}