@integrigo/integrigo-ui 1.6.7-c → 1.6.10

package/src/components/molecules/Radio/Radio.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FieldLabel } from '../../atoms/Field';
+import { Label } from '../../atoms/Typography/Label';
+
+export enum Size {
+  xl = 'xl',
+  l = 'l',
+  m = 'm',
+  s = 's',
+}
+
+export type RadioProps = Omit<
+React.InputHTMLAttributes<HTMLInputElement>,
+'type' | 'size'
+> & {
+  size?: Size;
+  label?: string;
+};
+
+const sizeVariant = {
+  xl: {
+    size: '30px',
+    border: '4px',
+    gap: '10px',
+    fontSize: '20px',
+    lineHeight: '30px',
+    checkmarkBefore: {
+      width: '3px',
+      height: '16px',
+      left: '11px',
+      top: '2px',
+    },
+    checkmarkAfter: {
+      width: '6px',
+      height: '3px',
+      left: '6px',
+      top: '15px',
+    },
+  },
+  l: {
+    size: '24px',
+    border: '3px',
+    gap: '8px',
+    fontSize: '16px',
+    lineHeight: '24px',
+    checkmarkBefore: {
+      width: '3px',
+      height: '12px',
+      left: '10px',
+      top: '2px',
+    },
+    checkmarkAfter: {
+      width: '5px',
+      height: '3px',
+      left: '5px',
+      top: '11px',
+    },
+  },
+  m: {
+    size: '18px',
+    border: '2.5px',
+    gap: '6px',
+    fontSize: '12px',
+    lineHeight: '18px',
+    checkmarkBefore: {
+      width: '2px',
+      height: '10px',
+      left: '7px',
+      top: '0px',
+    },
+    checkmarkAfter: {
+      width: '5px',
+      height: '2px',
+      left: '4px',
+      top: '9px',
+    },
+  },
+  s: {
+    size: '12px',
+    border: '2px',
+    gap: '4px',
+    fontSize: '8px',
+    lineHeight: '12px',
+    checkmarkBefore: {
+      width: '1px',
+      height: '6px',
+      left: '4px',
+      top: '1px',
+    },
+    checkmarkAfter: {
+      width: '2px',
+      height: '1px',
+      left: '2px',
+      top: '6px',
+    },
+  },
+};
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  ({ size = Size.m, label = '', ...props }, ref) => {
+    return (
+      <FieldLabel sizeVariant={size} position="inline" disabled={props.disabled}>
+        <Label size={size} text={label}>
+          <Input ref={ref} type="radio" sizeVariant={size} {...props} />
+          <Checkmark data-testid="checkmark" sizeVariant={size} />
+        </Label>
+      </FieldLabel>
+    );
+  },
+);
+
+const Input = styled.input<{
+  sizeVariant: Size;
+}>`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  width: 0;
+  height: 0;
+`;
+
+Input.displayName = 'Input';
+
+const Checkmark = styled.span<{
+  sizeVariant: Size;
+}>`
+  width: min-content;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  transform: rotate(45deg);
+
+  ${(p) => `
+    border: ${sizeVariant[p.sizeVariant].border} solid var(--shades-of-grey-40);
+    width: ${sizeVariant[p.sizeVariant].size};
+    height: ${sizeVariant[p.sizeVariant].size};
+  `}
+
+  &:before {
+    display: none;
+    content: "";
+    position: absolute;
+    background-color: var(--color-white);
+
+    ${(p) => `
+      width: ${sizeVariant[p.sizeVariant].checkmarkBefore.width};
+      height: ${sizeVariant[p.sizeVariant].checkmarkBefore.height};
+      left: ${sizeVariant[p.sizeVariant].checkmarkBefore.left};
+      top: ${sizeVariant[p.sizeVariant].checkmarkBefore.top};
+    `}
+  }
+
+  &:after {
+    display: none;
+    content: "";
+    position: absolute;
+    background-color: var(--color-white);
+    ${(p) => `
+      width: ${sizeVariant[p.sizeVariant].checkmarkAfter.width};
+      height: ${sizeVariant[p.sizeVariant].checkmarkAfter.height};
+      left: ${sizeVariant[p.sizeVariant].checkmarkAfter.left};
+      top: ${sizeVariant[p.sizeVariant].checkmarkAfter.top};
+    `}
+  }
+
+  ${Input}:disabled ~ & {
+    opacity: 0.5;
+  }
+
+  // not checked
+  ${Input}:not(:checked):not([disabled]):hover ~ & {
+    border-color: var(--shades-of-grey-60);
+  }
+
+  ${Input}:not(:checked):not([disabled]):active ~ & {
+    border-color: var(--shades-of-grey-60);
+    background-color: var(--shades-of-grey-60);
+  }
+
+  // checked
+  ${Input}:checked ~ & {
+    background-color: var(--color-orange);
+    border-color: var(--color-orange);
+  }
+
+  ${Input}:checked:hover ~ & {
+    opacity: 0.8;
+  }
+
+  ${Input}:checked:not([disabled]):active ~ & {
+    opacity: 0.65;
+  }
+
+  ${Input}:checked ~ &:before {
+    display: block;
+  }
+
+  ${Input}:checked ~ &:after {
+    display: block;
+  }
+`;
+
+Checkmark.displayName = 'Checkmark';

package/src/components/molecules/Radio/__snapshots__/Radio.test.tsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Radio /> disabled - should match snapshot 1`] = `
+<div>
+  <div
+    class="sc-bdvvtL jHpHow"
+    disabled=""
+  >
+    <label
+      class="sc-dkPtRN DvdcQ"
+    >
+      <input
+        class="sc-eCImPb enczZx"
+        disabled=""
+        type="radio"
+      />
+      <span
+        class="sc-jRQBWg bTJrsl"
+        data-testid="checkmark"
+      />
+      <span
+        class="sc-hKwDye gUstVb"
+      >
+        Label
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> enabled + checked - should match snapshot 1`] = `
+<div>
+  <div
+    class="sc-bdvvtL gMUGTo"
+  >
+    <label
+      class="sc-dkPtRN DvdcQ"
+    >
+      <input
+        checked=""
+        class="sc-eCImPb enczZx"
+        type="radio"
+      />
+      <span
+        class="sc-jRQBWg bTJrsl"
+        data-testid="checkmark"
+      />
+      <span
+        class="sc-hKwDye gUstVb"
+      >
+        Label
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> enabled - should match snapshot 1`] = `
+<div>
+  <div
+    class="sc-bdvvtL gMUGTo"
+  >
+    <label
+      class="sc-dkPtRN DvdcQ"
+    >
+      <input
+        class="sc-eCImPb enczZx"
+        type="radio"
+      />
+      <span
+        class="sc-jRQBWg bTJrsl"
+        data-testid="checkmark"
+      />
+      <span
+        class="sc-hKwDye gUstVb"
+      >
+        Label
+      </span>
+    </label>
+  </div>
+</div>
+`;

package/src/components/molecules/Radio/index.tsx

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

package/src/components/molecules/TextArea/TextArea.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { TextArea } from './TextArea';
+
+export default {
+  title: 'Molecules/TextArea',
+  component: TextArea,
+} as ComponentMeta<typeof TextArea>;
+
+const Template: ComponentStory<typeof TextArea> = (args) => <TextArea {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  placeholder: 'Basic text area',
+  disabled: false,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  placeholder: 'Success text area',
+  validationType: 'success',
+  disabled: false,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  placeholder: 'Error text area',
+  validationType: 'error',
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: 'Disabled input',
+  disabled: true,
+};

package/src/components/molecules/TextArea/TextArea.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getValidationTypeProps } from '../../../helpers/validation';
+import { ValidationType } from '../../../types/validation';
+
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  validationType?: ValidationType;
+}
+
+export const TextArea: React.FC<TextAreaProps> = (props) => {
+  return <TextAreaElement rows={4} {...props} />;
+};
+
+const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
+  background-color: var(--color-white);
+  border: 2px solid var(--shades-of-grey-80);
+  border-radius: var(--padding-s);
+  padding: var(--padding-m);
+  position: relative;
+  overflow: hidden;
+  color: var(--shades-of-grey-100);
+  font-weight: var(--font-bold);
+  transition: border var(--transition-speed),
+    background-color var(--transition-speed);
+  width: 100%;
+  resize: none;
+
+  &::placeholder {
+    color: var(--shades-of-grey-80);
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+    background-color: transparent;
+    border: 2px solid var(--color-orange);
+  }
+  ${(p) => getValidationTypeProps(p.validationType)};
+
+  &:disabled {
+    &::placeholder {
+      color: var(--shades-of-grey-60);
+    }
+    background-color: var(--shades-of-grey-40);
+    border: 2px solid var(--shades-of-grey-60);
+  }
+`;
+
+TextAreaElement.displayName = 'TextAreaElement';

package/src/components/molecules/TextArea/index.ts

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

package/src/components/molecules/index.ts

@@ -0,0 +1,8 @@
+export { InfoCard } from './InfoCard';
+export { Input } from './Input';
+export { TextArea } from './TextArea';
+export { Button } from './Button';
+export { Checkbox } from './Checkbox';
+export { Dropdown } from './Dropdown';
+export { Radio } from './Radio';
+export { Profile } from './Profile';

package/src/components/organisms/Menu/Menu.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Menu } from './Menu';
+
+export default {
+  title: 'Organisms/Menu',
+  component: Menu,
+} as ComponentMeta<typeof Menu>;
+
+const Template: ComponentStory<typeof Menu> = (args) => (
+  <Menu {...args}>
+    <Menu.Item active icon="home" label="Home" />
+    <Menu.Item icon="dice-five" label="Challenges" />
+    <Menu.Item icon="bars" label="Attempts" />
+  </Menu>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/organisms/Menu/Menu.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MenuItem } from './MenuItem';
+
+export interface MenuStaticProps {
+  Item: typeof MenuItem;
+}
+
+export interface MenuProps {
+  children: React.ReactNode
+}
+
+const Menu: React.FC<MenuProps> = ({ children }) => {
+  return (
+    <Root>
+      {children}
+    </Root>
+  );
+};
+
+const MenuWithStatic = Object.assign(Menu, { Item: MenuItem });
+
+export { MenuWithStatic as Menu };
+
+const Root = styled.nav`
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-s);
+`;

package/src/components/organisms/Menu/MenuItem.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Color } from '../../../styles';
+import { Icon, IconType } from '../../atoms/Icon';
+
+export interface MenuItemProps {
+  active?: boolean;
+  label: string;
+  icon: IconType;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({ active, label, icon }) => {
+  return (
+    <Root active={active}>
+      <Icon type={icon} />
+      {label}
+    </Root>
+  );
+};
+
+export const Root = styled.div<Pick<MenuItemProps, 'active'>>`
+  align-items: center;
+  border-radius: 24px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  font-weight: var(--font-bold);
+  text-align: left;
+  padding: 12px 18px;
+  transition: border-color var(--transition-speed),
+    background-color var(--transition-speed), color var(--transition-speed);
+
+  & svg {
+    transition: fill var(--transition-speed);
+  }
+
+  &:hover {
+    border-color: ${(p) => (p.active ? 'transparent' : 'var(--color-navy)')};
+  }
+
+  &:focus {
+    background-color: var(--color-ecru);
+    color: var(--color-orange);
+
+    & svg {
+      fill: var(--color-orange);
+    }
+  }
+
+  ${(p) =>
+    p.active &&
+    `
+      color: var(--color-white);
+      background-color: var(--color-orange);
+      box-shadow: 0 0 10px 0 var(--shades-of-grey-40);
+
+      &:not(:focus) svg {
+        fill: var(--color-white);
+      }
+    `}
+`;

package/src/components/organisms/Menu/index.ts

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

package/src/components/organisms/Setting/Setting.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Setting } from './Setting';
+
+export default {
+  title: 'Organisms/Setting',
+  component: Setting,
+} as ComponentMeta<typeof Setting>;
+
+const Template: ComponentStory<typeof Setting> = (args) => (
+  <Setting {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  icon: 'user-circle',
+  title: 'Title',
+  subtitle: 'Subtitle',
+  trigger: 'Open',
+};

package/src/components/organisms/Setting/Setting.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Icon, IconType } from '../../atoms/Icon';
+import { Typography } from '../../atoms/Typography';
+
+const { Body, Hero } = Typography;
+
+export interface SettingProps {
+  icon?: IconType;
+  title: string;
+  subtitle?: string;
+  trigger: string;
+  children?: React.ReactNode;
+}
+
+export const Setting: React.FC<SettingProps> = ({
+  icon,
+  title,
+  subtitle,
+  trigger,
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  const handleTriggerClick = (): void => {
+    setOpen((current) => !current);
+  };
+
+  return (
+    <>
+      <Root active={open} onClick={handleTriggerClick}>
+        <LeftHandSide>
+          {icon && <Icon size={{ width: 24, height: 24 }} type={icon} />}
+
+          <Content>
+            <Body bold size="l">
+              {title}
+            </Body>
+            <Body bold>{subtitle}</Body>
+          </Content>
+        </LeftHandSide>
+
+        <Trigger active={open}>
+          <Icon type="angle-down" size={{ width: 16, height: 16 }} />
+          <Body bold size="l" as="span">
+            {trigger}
+          </Body>
+        </Trigger>
+      </Root>
+
+      {open && <ExpandedBody>{children}</ExpandedBody>}
+    </>
+  );
+};
+
+const Root = styled.div<{ active: boolean }>`
+  align-items: center;
+  background-color: var(--color-white);
+  border: 1px solid
+    ${(p) => (p.active ? 'var(--color-orange)' : 'var(--shades-of-grey-40)')};
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--padding-m) var(--padding-l);
+  transition: border var(--transition-speed);
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  & > * {
+    margin: 0;
+  }
+`;
+
+const LeftHandSide = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--padding-m);
+`;
+
+const Trigger = styled.div<{ active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: var(--padding-s);
+
+  & svg {
+    transform: ${(p) => (p.active ? 'rotate(180deg)' : 'rotate(0)')};
+    transition: transform var(--transition-speed);
+  }
+`;
+
+const ExpandedBody = styled.div`
+  background-color: var(--shades-of-grey-20);
+  padding: var(--padding-m) var(--padding-l);
+  margin-top: var(--padding-s);
+`;

package/src/components/organisms/Setting/index.ts

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

package/src/components/organisms/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export { Setting } from './Setting';

package/src/global.d.ts

@@ -0,0 +1,6 @@
+export declare module 'react' {
+  type WithStyledComponent = {
+    className?: string
+  };
+  type FCS<P = {}> = FunctionComponent<P & WithStyledComponent>;
+}

package/src/helpers/validation.ts

@@ -0,0 +1,31 @@
+import { css, FlattenSimpleInterpolation } from 'styled-components';
+import { ValidationType } from '../types/validation';
+
+export const getValidationTypeProps = (
+  type?: ValidationType,
+): FlattenSimpleInterpolation => {
+  switch (type) {
+    case 'success':
+      return css`
+        border-color: var(--color-success-100);
+        background-color: var(--color-success-10);
+
+        &:focus,
+        &:active {
+          border-color: var(--color-success-100);
+        }
+      `;
+    case 'error':
+      return css`
+        border-color: var(--color-error-100);
+        background-color: var(--color-error-10);
+
+        &:focus,
+        &:active {
+          border-color: var(--color-error-100);
+        }
+      `;
+    default:
+      return css``;
+  }
+};

package/src/index.ts

@@ -0,0 +1,28 @@
+export {
+  Alert,
+  Avatar,
+  Card,
+  Divider,
+  Icon,
+  Nav,
+  Pill,
+  Typography,
+  Spinner,
+  Chip,
+  Dot,
+} from "./components/atoms";
+
+export {
+  InfoCard,
+  Input,
+  TextArea,
+  Button,
+  Checkbox,
+  Dropdown,
+  Profile,
+  Radio,
+} from "./components/molecules";
+
+export { Menu, Setting } from "./components/organisms";
+
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";