@integrigo/integrigo-ui 1.3.1 → 1.3.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.3.1",
+  "version": "1.3.4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -49,8 +49,8 @@
     "build": "rollup -c"
   },
   "exports": {
-    ".": "./index.ts",
-    "./lib/*": "./components/*/index.ts",
-    "./style/": "./style/"
+    ".": "./lib/index.js",
+    "./lib/*": "./lib/components/*/index.js",
+    "./style/": "./lib/style/"
   }
 }

package/src/components/atoms/Button/Button.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-export interface ButtonProps
-  extends React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
-  primary?: boolean;
-  ghost?: boolean;
-  size?: "small" | "medium" | "large";
-}
-
-export const Button = styled.button<Omit<ButtonProps, "label">>`
-  background-color: transparent;
-  border: none;
-  border-radius: var(--padding-xl);
-  padding: var(--padding-m) var(--padding-l);
-  font-weight: var(--font-bold);
-  font-size: var(--font-size-l);
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-
-  &:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
-    background-color: ${(p) =>
-      p.primary && !p.ghost ? "var(--color-orange)" : "transparent"};
-    border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-orange)")};
-    border-radius: var(--padding-xl);
-    z-index: -1;
-    transition: opacity var(--transition-speed);
-  }
-
-  &:focus,
-  &:active {
-    color: ${(p) =>
-      p.primary && !p.ghost ? "var(--color-white)" : "var(--color-navy)"};
-    outline: none;
-  }
-
-  &:focus:before,
-  &:active:before {
-    background-color: ${(p) =>
-      p.primary && !p.ghost ? "var(--color-green)" : "transparent"};
-    border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-green)")};
-  }
-
-  &:hover:before {
-    opacity: 0.5;
-  }
-
-  &:hover:focus:before,
-  &:hover:active:before {
-    opacity: 1;
-  }
-`;
-
-Button.displayName = "Button";

package/src/components/atoms/Button/index.ts

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

package/src/components/atoms/Card/Card.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components'
-
-export const Card = styled.div<{inverse?: boolean}>`
-  background-color: ${p => p.inverse ? 'var(--color-navy)' : 'var(--color-white)'};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  color: ${p => p.inverse ? 'var(--color-white)' : 'var(--color-navy)'};
-  padding: var(--padding-xl);
-  border-radius: 24px;
-`
-
-Card.displayName = 'Card'

package/src/components/atoms/Card/index.ts

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

package/src/components/atoms/Icon/Icon.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconProps,
-} from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
-import * as SolidIcons from "@fortawesome/free-solid-svg-icons";
-import * as BrandIcons from "@fortawesome/free-brands-svg-icons";
-
-const ICONS = ["bars", "plus", "minus", "phone", "envelope"];
-const SOCIAL_ICONS = ["facebook", "instagram", "linkedin"];
-
-type IconType = typeof ICONS[number];
-type IconSocialType = typeof SOCIAL_ICONS[number];
-
-type IconProps = Omit<FontAwesomeIconProps, "icon"> & {
-  icon: IconType | IconSocialType;
-};
-
-const toFaIcon = <T extends typeof BrandIcons | typeof SolidIcons>(
-  icon: IconType | IconSocialType
-): keyof T => `fa${icon.charAt(0).toUpperCase() + icon.slice(1)}` as keyof T;
-
-const getIcon = (icon: IconType | IconSocialType): IconProp => {
-  if (SOCIAL_ICONS.includes(icon)) {
-    if (icon === "facebook") {
-      return BrandIcons.faFacebookSquare;
-    }
-
-    const iconName = toFaIcon(icon);
-    return BrandIcons[iconName] as IconProp;
-  }
-
-  const iconName = toFaIcon(icon) as keyof typeof SolidIcons;
-  return SolidIcons[iconName] as IconProp;
-};
-
-export const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
-  const iconType = getIcon(icon);
-
-  return <FontAwesomeIcon icon={iconType} {...props} />;
-};

package/src/components/atoms/Icon/index.ts

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

package/src/components/atoms/Input/Input.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-
-export const Input = styled.input`
-  background-color: var(--color-orange-transparent);
-  border: 2px solid transparent;
-  border-radius: var(--padding-xl);
-  padding: var(--padding-l);
-  position: relative;
-  overflow: hidden;
-  color: var(--color-navy);
-  font-weight: var(--font-bold);
-
-  &:focus, &:active {
-    outline: none;
-    border: 2px solid var(--color-green);
-  }
-`
-
-Input.displayName = 'Input'

package/src/components/atoms/Input/index.ts

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

package/src/components/atoms/Nav/Nav.tsx

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-
-export interface NavProps {
-  active?: boolean;
-}
-
-export const Nav = styled.nav<NavProps>`
-  font-size: var(--font-size-l);
-  font-weight: ${p => p.active ? 'var(--font-bold)' : 'var(--font-medium)'};
-  cursor: pointer;
-  white-space: nowrap;
-  width: min-content;
-  transition: color var(--transition-speed);
-  padding: var(--padding-s) var(--padding-l);
-
-  &:hover {
-    color: ${p => p.active ? 'auto' : 'var(--color-green)' };
-  }
-`
-
-Nav.displayName = 'Nav'

package/src/components/atoms/Nav/index.ts

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

package/src/components/atoms/Pill/Pill.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-interface PillProps {
-  variant: 'orange' | 'green' | 'red'
-}
-
-export const Pill = styled.div<PillProps>`
-  background-color: ${p => `var(--color-${p.variant})`};
-  border-radius: var(--padding-l);
-  color: var(--color-white);
-  font-weight: var(--font-bold);
-  font-size: var(--font-size-m);
-  padding: var(--padding-s) var(--padding-xxl);
-  width: min-content;
-`
-
-Pill.displayName = 'Pill'

package/src/components/atoms/Pill/index.ts

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

package/src/components/atoms/Typography/Body.tsx

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-
-export interface BodyProps {
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
-}
-
-export const Body = styled.p<BodyProps>`
-  font-size: ${p => `var(--font-size-${p.size || 'm'})`};
-  line-height: ${p => `calc(1.5*var(--font-size-${p.size || 'm'}))`};
-`
-
-Body.displayName = 'Body'

package/src/components/atoms/Typography/Hero.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import styled from "styled-components";
-
-export interface HeroProps {
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
-}
-
-const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'> = {
-  's': 'h5',
-  'm': 'h4',
-  'l': 'h3',
-  'xl': 'h2',
-  'xxl': 'h1',
-}
-
-export const Hero: React.FC<HeroProps> = ({ size = 'l', children }) => (
-  <Header as={SIZE_MAP[size]}>{children}</Header>
-)
-
-const Header = styled.h1``
-Header.displayName = 'Header'

package/src/components/atoms/Typography/Label.tsx

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-
-export interface LabelProps {
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
-}
-
-export const Label = styled.span<LabelProps>`
-  font-size: ${p => `var(--font-size-${p.size || 'm'})`};
-  font-weight: var(--font-medium);
-`
-
-Label.displayName = 'Label'

package/src/components/atoms/Typography/index.ts

@@ -1,5 +0,0 @@
-import { Body } from './Body'
-import { Hero } from './Hero'
-import { Label } from './Label'
-
-export const Typography = { Body, Hero, Label }

package/src/components/atoms/index.ts

@@ -1,7 +0,0 @@
-export { Button } from './Button'
-export { Card } from './Card'
-export { Icon } from './Icon'
-export { Input } from './Input'
-export { Pill } from './Pill'
-export { Typography } from './Typography'
-export { Nav } from './Nav'

package/src/components/molecules/InfoCard/InfoCard.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Card } from "../../atoms/Card";
-import { Hero } from "../../atoms/Typography/Hero";
-import { Body } from "../../atoms/Typography/Body";
-
-export interface InfoCardProps {
-  title: string;
-  body: React.ReactNode;
-  background?: React.ReactNode;
-  inverse?: boolean;
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
-}
-
-export const InfoCard: React.FC<InfoCardProps> = ({
-  title,
-  body,
-  background,
-  inverse = false,
-  size = 'l'
-}) => {
-  return (
-    <Root>
-      {background && <Background>{background}</Background>}
-      <CardBody inverse={inverse}>
-        <Hero size={size}>{title}</Hero>
-        <Body size={size}>{body}</Body>
-      </CardBody>
-    </Root>
-  );
-};
-
-const Root = styled.div`
-  padding: 0;
-  position: relative;
-
-  & > ${Card} > p {
-    margin: 0;
-  }
-`;
-
-Root.displayName = "Root";
-
-const CardBody = styled(Card)<{ inverse: boolean }>`
-  position: relative;
-
-  & > * {
-    margin: 0;
-    margin-bottom: var(--padding-m);
-    color: ${p => p.inverse ? 'var(--color-white)' : 'var(--color-navy)'};
-  }
-
-  & > p {
-    margin: 0;
-  }
-`;
-
-CardBody.displayName = "CardBody";
-
-const Background = styled(Card)`
-  border-radius: 24px 24px 0px 0px;
-  position: relative;
-  height: 100%;
-  margin-bottom: -24px;
-  padding: 0;
-  overflow: hidden;
-`;
-
-Background.displayName = "Background";

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

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

package/src/components/molecules/index.ts

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

package/src/index.ts

@@ -1,15 +0,0 @@
-export {
-  Button,
-  Card,
-  Icon,
-  Input,
-  Nav,
-  Pill,
-  Typography
-} from './components/atoms'
-
-export {
-  InfoCard
-} from './components/molecules'
-
-export { GlobalStyles as IntegrigoUI, Color } from './styles'

package/src/styles/colors.ts

@@ -1,8 +0,0 @@
-export enum Color {
-  White = '#FFF',
-  Ecru = '#F9F1E5',
-  Navy = '#172142',
-  Orange = '#E09A33',
-  Red = '#CF544B',
-  Green = '#6B8B4A'
-}

package/src/styles/global.ts

@@ -1,79 +0,0 @@
-import { createGlobalStyle } from 'styled-components'
-import { Color } from './colors'
-
-export const GlobalStyles = createGlobalStyle`
-@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,600;0,800;1,200;1,300;1,600;1,800&display=swap');
-
-  html {
-    --color-white: ${Color.White};
-    --color-ecru: ${Color.Ecru};
-    --color-navy: ${Color.Navy};
-    --color-orange: ${Color.Orange};
-    --color-red: ${Color.Red};
-    --color-green: ${Color.Green};
-
-    --color-orange-translucent: ${Color.Orange}80;
-    --color-orange-transparent: ${Color.Orange}33;
-
-    --padding-s: 8px;
-    --padding-m: 16px;
-    --padding-l: 24px;
-    --padding-xl: 32px;
-    --padding-xxl: 48px;
-
-    --font-bold: 800;
-    --font-medium: 600;
-    --font-thin: 300;
-
-    --font-size-s: 10px;
-    --font-size-m: 16px;
-    --font-size-l: 20px;
-    --font-size-xl: 32px;
-    --font-size-xxl: 40px;
-
-    --header-size-s: 16px;
-    --header-size-m: 24px;
-    --header-size-l: 32px;
-    --header-size-xl: 48px;
-    --header-size-xxl: 72px;
-
-    --transition-speed: .3s;
-  }
-
-  body {
-    background-color: var(--color-ecru);
-  }
-
-  * {
-    box-sizing: border-box;
-    color: var(--color-navy);
-    font-family: Raleway, Arial, Helvetica, Sans-Serif;
-    font-size: var(--font-size-m);
-    font-weight: var(--font-thin);
-  }
-
-  h1 {
-    font-size: var(--header-size-xxl);
-    font-weight: var(--font-bold);
-  }
-
-  h2 {
-    font-size: var(--header-size-xl);
-    font-weight: var(--font-bold);
-  }
-
-  h3 {
-    font-size: var(--header-size-l);
-    font-weight: var(--font-bold);
-  }
-
-  h4 {
-    font-size: var(--header-size-m);
-    font-weight: var(--font-bold);
-  }
-
-  h5 {
-    font-size: var(--header-size-s);
-    font-weight: var(--font-bold);
-  }
-`

package/src/styles/index.ts

@@ -1,2 +0,0 @@
-export { GlobalStyles } from './global'
-export { Color } from './colors'

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-    "compilerOptions": {
-      "target": "es5",
-      "outDir": "lib",
-      "lib": [
-        "dom",
-        "dom.iterable",
-        "esnext"
-      ],
-      "declaration": true,
-      "declarationDir": "lib",
-      "allowJs": true,
-      "skipLibCheck": true,
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "module": "esnext",
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": true,
-      "jsx": "react"
-    },
-    "include": [
-      "src"
-    ],
-    "exclude": [
-        "node_modules",
-        "lib"
-    ]
-  }