@integrigo/integrigo-ui 1.1.0

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

@@ -0,0 +1,54 @@
+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-l);
+  padding: var(--padding-s) 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-l);
+    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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './Card';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args}>Content</Card>;
+
+export const Basic = Template.bind({});
+Basic.args = {};
+
+export const Inversed = Template.bind({});
+Inversed.args = {
+  inverse: true
+};

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Input } from './Input';
+
+export default {
+  title: 'Atoms/Input',
+  component: Input,
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args}/>;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  placeholder: "Start"
+};

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

@@ -0,0 +1,19 @@
+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

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

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Pill } from './Pill';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Pill',
+  component: Pill,
+} as ComponentMeta<typeof Pill>;
+
+const Template: ComponentStory<typeof Pill> = (args) => <Pill {...args}>Tag</Pill>;
+
+export const Orange = Template.bind({});
+Orange.args = {
+  variant: 'orange'
+};
+
+export const Green = Template.bind({});
+Green.args = {
+  variant: 'green'
+};
+
+export const Red = Template.bind({});
+Red.args = {
+  variant: 'red'
+};

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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Body } from './Body';
+
+export default {
+  title: 'Atoms/Typography/Body',
+  component: Body,
+} as ComponentMeta<typeof Body>;
+
+const Template: ComponentStory<typeof Body> = (args) => <Body {...args}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra urna non purus convallis dignissim. Sed lobortis sem molestie est euismod, euismod aliquet dolor ullamcorper. Vivamus nisl metus, ultricies ac pharetra vel, faucibus vel lacus. Vestibulum eget nisi laoreet, dignissim urna sit amet, pretium arcu. Sed non diam dictum, sollicitudin orci et, ultricies nunc. Suspendisse ultrices mi tincidunt efficitur tristique. Vivamus fringilla condimentum tempus. Aliquam varius quam sit amet nunc iaculis, finibus dictum leo tincidunt.</Body>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl'
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl'
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l'
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm'
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's'
+};

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

@@ -0,0 +1,12 @@
+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.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Hero } from './Hero';
+
+export default {
+  title: 'Atoms/Typography/Hero',
+  component: Hero,
+} as ComponentMeta<typeof Hero>;
+
+const Template: ComponentStory<typeof Hero> = (args) => <Hero {...args}>Title</Hero>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl'
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl'
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l'
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm'
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's'
+};

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

@@ -0,0 +1,21 @@
+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.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Label } from './Label';
+
+export default {
+  title: 'Atoms/Typography/Label',
+  component: Label,
+} as ComponentMeta<typeof Label>;
+
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args}>The label text</Label>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl'
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl'
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l'
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm'
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's'
+};

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,3 @@
+export { Body } from './Body'
+export { Hero } from './Hero'
+export { Label } from './Label'

package/src/components/atoms/index.ts

@@ -0,0 +1,5 @@
+export { Button } from './Button'
+export { Card } from './Card'
+export { Input } from './Input'
+export { Pill } from './Pill'
+export { Body, Hero, Label } from './Typography'

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { InfoCard } from './InfoCard';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Molecules/InfoCard',
+  component: InfoCard,
+} as ComponentMeta<typeof InfoCard>;
+
+const Template: ComponentStory<typeof InfoCard> = (args) => <InfoCard {...args}>Tag</InfoCard>;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  title: "Title",
+  body: 'This is body'
+};
+
+export const WithBackground = Template.bind({});
+WithBackground.args = {
+  title: "Title",
+  body: 'This is body',
+  background: <div style={{ width: '100%', height: '240px', backgroundColor: 'var(--color-ecru)'}}/>
+};

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

@@ -0,0 +1,69 @@
+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
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({ title, body, background }) => {
+  return (
+    <Root>
+      <Background>
+        {background}
+      </Background>
+      <CardBody>
+        <Hero size="l">{title}</Hero>
+        <Body size="l">{body}</Body>
+      </CardBody>
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  padding: 0;
+  position: relative;
+
+  & > ${Card} {
+    
+  }
+
+  & > ${Card} > * {
+    }
+
+    & > ${Card} > p {
+      margin: 0;
+    }
+`
+
+Root.displayName = 'Root'
+
+const CardBody = styled(Card)`
+  position: relative;
+
+  & > * {
+      margin: 0;
+      margin-bottom: var(--padding-m);
+  }
+
+  & > 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

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

package/src/components/molecules/index.ts

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

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/atoms'
+export * from './components/molecules'
+
+export { GlobalStyles as IntegrigoUI, Color } from './styles'

package/src/styles/colors.ts

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

package/src/styles/global.ts

@@ -0,0 +1,75 @@
+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: 80px;
+
+    --transition-speed: .3s;
+  }
+
+  * {
+    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

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

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "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"
+    ]
+  }