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

package/lib/components/Grid/Tablist.layout.stories.tsx

@@ -1,281 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-import {capitalize} from '../../utils/string';
-import {Button} from '../Button';
-import {ButtonTab, ButtonTabs} from '../ButtonTabs';
-import {Card} from '../Card';
-import {SearchInput} from '../SearchInput';
-import {FormLabelSmall, JumboMedium} from '../Text';
-
-import {Col, Row} from './Grid';
-
-import css from './Tablist.layout.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Layout/Tablist',
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Tablist Layout',
-      description: {
-        component: `
-\`\`\`js
-import { Row, Col } from "@spaced-out/ui-design-system/lib/components/Grid";
-\`\`\`
-
-You can use the Grid component to create a layout with a tablist. The tablist can be used to switch between different views of the same data.
-ButtonTabs component can be used to create the tablist.
-
-### Usage
-
-\`\`\`jsx
-export const _Span8View = (): React.ReactNode => {
-  const [selectedId, setSelectedId] = React.useState('grid');
-
-  return (
-    <Row className={css.rowContainer}>
-      <Col span={8}>
-        <div className={css.layoutContainer}>
-          <div className={css.header}>
-            <JumboMedium>Span 8 | {capitalize(selectedId)} View</JumboMedium>
-            <div className={css.headingAction}>
-              <div className={css.leftAction}>
-                <SearchInput placeholder="Search for contact list" />
-                <FormLabelSmall color="secondary">(8) items</FormLabelSmall>
-              </div>
-              <div className={css.rightAction}>
-                <ButtonTabs
-                  selectedButtonTabId={selectedId}
-                  onButtonTabSelect={(id) => setSelectedId(id)}
-                >
-                  <ButtonTab
-                    id="grid"
-                    iconType="solid"
-                    iconName="grid-2"
-                  ></ButtonTab>
-                  <ButtonTab
-                    id="list"
-                    iconType="solid"
-                    iconName="bars"
-                  ></ButtonTab>
-                </ButtonTabs>
-                <Button type="secondary">Button Text</Button>
-                <Button>Button Text</Button>
-              </div>
-            </div>
-          </div>
-          <div
-            className={classify(css.content, css[selectedId], css.threeCols)}
-          >
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-          </div>
-        </div>
-      </Col>
-    </Row>
-  );
-};
-\`\`\`
-
-\`\`\`css
-@value gapCompensation: calc(size5 * 3);
-@value fourColsWidth: calc(spaceFluid / 4);
-@value threeColsWidth: calc(spaceFluid / 3);
-
-.rowContainer {
-  padding: spaceNone;
-  min-width: initial;
-}
-
-.layoutContainer {
-  display: flex;
-  flex-flow: column;
-  gap: spaceSmall;
-  width: spaceFluid;
-}
-
-.header {
-  display: flex;
-  flex-flow: column;
-  gap: spaceMedium;
-  width: spaceFluid;
-}
-
-.headingAction {
-  display: flex;
-  justify-content: space-between;
-}
-
-.leftAction {
-  display: flex;
-  gap: spaceSmall;
-}
-
-.rightAction {
-  display: flex;
-  gap: spaceSmall;
-}
-
-.content {
-  display: flex;
-  gap: spaceMedium;
-}
-
-.section {
-  display: flex;
-  composes: borderPrimary from '../../styles/border.module.css';
-  border-radius: borderRadiusMedium;
-  background-color: colorBackgroundTertiary;
-}
-
-.grid {
-  flex-flow: row;
-  flex-wrap: wrap;
-}
-
-.grid .section {
-  min-width: size300;
-  min-height: size240;
-}
-
-.fourCols .section {
-  width: calc(fourColsWidth - gapCompensation);
-}
-
-.threeCols .section {
-  width: calc(threeColsWidth - gapCompensation);
-}
-
-.list {
-  flex-flow: column;
-}
-
-.list .section {
-  min-width: spaceFluid;
-  min-height: size90;
-}
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Grid/Grid.jsx',
-    },
-  },
-};
-
-export const _Span12View = () => {
-  const [selectedId, setSelectedId] = React.useState('grid');
-
-  return (
-    <Row className={css.rowContainer}>
-      <Col span={12}>
-        <div className={css.layoutContainer}>
-          <div className={css.header}>
-            <JumboMedium>Span 12 | {capitalize(selectedId)} View</JumboMedium>
-            <div className={css.headingAction}>
-              <div className={css.leftAction}>
-                <SearchInput placeholder="Search for contact list" />
-                <FormLabelSmall color="secondary">(8) items</FormLabelSmall>
-              </div>
-              <div className={css.rightAction}>
-                <ButtonTabs
-                  selectedButtonTabId={selectedId}
-                  onButtonTabSelect={(id) => setSelectedId(id)}
-                >
-                  <ButtonTab
-                    id="grid"
-                    iconType="solid"
-                    iconName="grid-2"
-                  ></ButtonTab>
-                  <ButtonTab
-                    id="list"
-                    iconType="solid"
-                    iconName="bars"
-                  ></ButtonTab>
-                </ButtonTabs>
-                <Button type="secondary">Button Text</Button>
-                <Button>Button Text</Button>
-              </div>
-            </div>
-          </div>
-          <div className={classify(css.content, css[selectedId], css.fourCols)}>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-          </div>
-        </div>
-      </Col>
-    </Row>
-  );
-};
-
-export const _Span8View = () => {
-  const [selectedId, setSelectedId] = React.useState('grid');
-
-  return (
-    <Row className={css.rowContainer}>
-      <Col span={8}>
-        <div className={css.layoutContainer}>
-          <div className={css.header}>
-            <JumboMedium>Span 8 | {capitalize(selectedId)} View</JumboMedium>
-            <div className={css.headingAction}>
-              <div className={css.leftAction}>
-                <SearchInput placeholder="Search for contact list" />
-                {/* <FormLabelSmall color="secondary">(8) items</FormLabelSmall> */}
-              </div>
-              <div className={css.rightAction}>
-                <ButtonTabs
-                  selectedButtonTabId={selectedId}
-                  onButtonTabSelect={(id) => setSelectedId(id)}
-                >
-                  <ButtonTab
-                    id="grid"
-                    iconType="solid"
-                    iconName="grid-2"
-                  ></ButtonTab>
-                  <ButtonTab
-                    id="list"
-                    iconType="solid"
-                    iconName="bars"
-                  ></ButtonTab>
-                </ButtonTabs>
-                <Button type="secondary">Button Text</Button>
-                <Button>Button Text</Button>
-              </div>
-            </div>
-          </div>
-          <div
-            className={classify(css.content, css[selectedId], css.threeCols)}
-          >
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-            <Card classNames={{wrapper: css.section}}> </Card>
-          </div>
-        </div>
-      </Col>
-    </Row>
-  );
-};

package/lib/components/Grid/index.ts

@@ -1 +0,0 @@
-export * from './Grid';

package/lib/components/Icon/ClickableIcon.tsx

@@ -1,104 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {TEXT_COLORS} from '../Text';
-
-import type {IconProps, IconSize, IconType} from './';
-import {Icon} from './';
-
-import css from './ClickableIcon.module.css';
-
-
-type ClassNames = Readonly<{
-  icon?: string;
-  button?: string;
-}>;
-
-export type ClickableIconProps = ((IconProps) & {
-  disabled?: boolean;
-  classNames?: ClassNames;
-});
-
-export const ClickableIcon: Flow.AbstractComponent<ClickableIconProps, HTMLButtonElement> = React.forwardRef<HTMLButtonElement, ClickableIconProps>((
-  {
-    size = 'medium',
-    ariaLabel,
-    onClick,
-
-    // Deprecated for Clickable Icon
-    className,
-
-    classNames,
-    disabled = false,
-    ...props
-  }: ClickableIconProps,
-  ref,
-) => {
-  const onKeyDownHandler = (e: any) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onClick && onClick(e);
-    }
-  };
-  return (
-    <UnstyledButton
-      {...props}
-      onClick={onClick}
-      disabled={disabled}
-// @ts-ignore - TS2769 - No overload matches this call.
-      onKeyDown={onKeyDownHandler}
-      ariaLabel={ariaLabel}
-      className={classify(
-        css.button,
-        {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-          [css.large]: size === 'large',
-        },
-        classNames?.button,
-      )}
-      ref={ref}
-    >
-      <Icon
-        {...props}
-        size={size}
-        color={disabled ? TEXT_COLORS.disabled : props.color}
-        className={classNames?.icon || className}
-      />
-    </UnstyledButton>
-  );
-});
-
-export type CloseIconProps = {
-  size?: IconSize;
-  type?: IconType;
-  color?: ColorTypes;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  className?: string // Deprecated for Clickable Icon;
-  ariaLabel?: string;
-  disabled?: boolean;
-  classNames?: ClassNames;
-};
-
-export const CloseIcon: Flow.AbstractComponent<CloseIconProps, HTMLButtonElement> = React.forwardRef<HTMLButtonElement, CloseIconProps>((
-  {
-    size = 'medium',
-    type = 'regular',
-    color = TEXT_COLORS.primary,
-    ...props
-  }: CloseIconProps,
-  ref,
-) => (
-  <ClickableIcon
-    name="close"
-    size={size}
-    type={type}
-    color={color}
-    {...props}
-    ref={ref}
-  />
-));

package/lib/components/Icon/Icon.docs.ts

@@ -1,118 +0,0 @@
-import {TEXT_COLORS} from '../../types/typography';
-
-import {ICON_SIZE} from './Icon';
-
-
-const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
-const iconSize: Array<unknown> = [...Object.values(ICON_SIZE)];
-
-export const ICON_DOCS = {
-  argTypes: {
-    type: {
-      description:
-        'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    name: {
-      description:
-        'Icon Name represents name of icon as supported by fontawesome',
-      type: {required: true},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'face-party'},
-      },
-    },
-    color: {
-      description: 'Same set of colors as supported in text',
-      options: colorOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    size: {
-      description:
-        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
-      options: iconSize,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    swapOpacity: {
-      name: 'swapOpacity',
-      description: `Swap the default opacity of each layer in a duotone icon.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    className: {
-      description: 'External className to be applied on container',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onClick: {
-      description: 'onClick handler',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the clickable icon is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Icon component',
-      description: {
-        component: `
-\`\`\`js
-import {
-  Icon,
-  ClickableIcon,
-  CloseIcon,
-  SemanticIcon
-} from "@spaced-out/ui-design-system/lib/components/Icon";
-\`\`\`
-Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
-The name prop has be to consistent with one used in fontawesome.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Icon/Icon.jsx',
-    },
-  },
-} as const;

package/lib/components/Icon/Icon.stories.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-
-import {
-  colorIconPrimary,
-  colorIconSecondary,
-} from '../../styles/variables/_color';
-import {TEXT_COLORS} from '../../types/typography';
-import {Tooltip} from '../Tooltip';
-
-import type {CloseIconProps, IconProps} from './';
-import {ICON_DOCS} from './Icon.docs';
-import {ClickableIcon, CloseIcon, Icon} from './';
-
-import css from './Icon.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Icon',
-  component: Icon,
-  ...ICON_DOCS,
-};
-
-export const _Icon = (args: IconProps) => <Icon {...args} />;
-
-_Icon.args = {
-  type: 'regular',
-  name: 'face-party',
-  size: 'medium',
-  color: TEXT_COLORS.primary,
-};
-
-export const _IconWithTooltip = (args: IconProps) => (<div className={css.iconWithTooltip}>
-  <Tooltip body={args.name}>
-    <Icon {...args} />
-  </Tooltip>
-</div>);
-
-_IconWithTooltip.args = {
-  type: 'regular',
-  name: 'face-party',
-  size: 'medium',
-  color: TEXT_COLORS.primary,
-};
-
-export const _ClickableIcon = (args: IconProps) => (<ClickableIcon {...args}></ClickableIcon>);
-
-_ClickableIcon.args = {
-  type: 'regular',
-  name: 'face-party',
-  size: 'medium',
-  color: TEXT_COLORS.primary,
-  ariaLabel: 'Icon Button',
-};
-
-export const _CloseIcon = (args: CloseIconProps) => (<CloseIcon {...args}></CloseIcon>);
-
-_CloseIcon.args = {
-  type: 'regular',
-  size: 'medium',
-  color: TEXT_COLORS.primary,
-  ariaLabel: 'Close Icon',
-};
-
-export const _DuotoneIcon = (args: IconProps) => <Icon {...args} />;
-
-_DuotoneIcon.args = {
-  type: 'duotone',
-  name: 'house',
-  size: 'medium',
-  color: TEXT_COLORS.primary,
-  swapOpacity: true,
-  style: {
-    '--fa-primary-color': colorIconPrimary,
-    '--fa-secondary-color': colorIconSecondary,
-    '--fa-primary-opacity': '1.0',
-    '--fa-secondary-opacity': '1.0',
-  },
-};

package/lib/components/Icon/Icon.tsx

@@ -1,78 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-
-import typographyStyle from '../../styles/typography.module.css';
-
-
-export const ICON_TYPE = Object.freeze({
-  regular: 'regular',
-  solid: 'solid',
-  duotone: 'duotone',
-  brands: 'brands',
-});
-
-export const ICON_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-});
-
-export type IconSize = keyof typeof ICON_SIZE;
-export type IconType = keyof typeof ICON_TYPE;
-
-export type IconProps = {
-  type?: IconType;
-  name: string;
-  size?: IconSize;
-  color?: ColorTypes;
-  className?: string;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  ariaLabel?: string;
-  swapOpacity?: boolean;
-  style?: {
-    [key: string]: string;
-  };
-};
-
-export const Icon: Flow.AbstractComponent<IconProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, IconProps>((
-    {
-      type = 'regular',
-      name = '',
-      size = 'medium',
-      color = TEXT_COLORS.primary,
-      className,
-      style,
-      onClick,
-      swapOpacity,
-    }: IconProps,
-    forwardRef,
-  ) => (
-    <>
-      {!!name && (
-        <div
-          className={classify(
-            typographyStyle.centerAlignFlex,
-            typographyStyle[`${size}Icon`],
-            typographyStyle[color],
-            className,
-          )}
-// @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-          onClick={onClick}
-          ref={forwardRef}
-        >
-          <i
-            className={classify(`fa-${type} fa-${name} `, {
-              ['fa-swap-opacity']: swapOpacity,
-            })}
-            style={style}
-          />
-        </div>
-      )}
-    </>
-  ));