Merge branch 'release/0.1.2' into main

.storybook/main.js

@@ -6,6 +6,6 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
+    "@storybook/preset-create-react-app",
   ]
 }

.storybook/preview-head.html

@@ -0,0 +1,41 @@
+<style>
+    /* red-hat-text-regular - latin */
+    @font-face {
+        font-family: 'Red Hat Text';
+        font-style: normal;
+        font-weight: 400;
+        src: local(''),
+            url('/fonts/red-hat-text-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('/fonts/red-hat-text-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    /* red-hat-text-500 - latin */
+    @font-face {
+        font-family: 'Red Hat Text';
+        font-style: normal;
+        font-weight: 500;
+        src: local(''),
+            url('/fonts/red-hat-text-v6-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('/fonts/red-hat-text-v6-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    /* red-hat-display-700 - latin */
+    @font-face {
+        font-family: 'Red Hat Display';
+        font-style: normal;
+        font-weight: 700;
+        src: local(''),
+            url('/fonts/red-hat-display-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('/fonts/red-hat-display-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    @font-face {
+        font-family: 'TeX Gyre Adventor';
+        font-style: normal;
+        font-weight: normal;
+        src: url('/fonts/texgyreadventor-regular-webfont.woff');
+    }
+    @font-face {
+        font-family: 'TeX Gyre Adventor';
+        font-style: normal;
+        font-weight: 700;
+        src: url('/fonts/texgyreadventor-bold-webfont.woff');
+    }
+</style>

.storybook/preview.js

@@ -1,3 +1,5 @@
+import { brandColors } from "../src/common/colors";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +8,17 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    default: 'GIV - Dark',
+    values: [
+      {
+        name: 'GIV - Dark',
+        value: brandColors.giv[600],
+      },
+      {
+        name: 'GIV - Light',
+        value: brandColors.giv['000'],
+      },
+    ],
+  },
 }

.storybook/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = async ({ config }) => {
+  // styles
+  config.module.rules.push({
+    test: /\.(sass|scss)$/,
+    use: ['resolve-url-loader'],
+    include: path.resolve(__dirname, '../')
+  });
+  // fonts
+  config.module.rules.push({
+    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+    use: [
+      {
+        loader: 'file-loader',
+        query: {
+          name: '[name].[ext]'
+        }
+      }
+    ],
+    include: path.resolve(__dirname, '../')
+  });
+
+  return config;
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giveth/ui-design-system",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "files": [
     "dist"
   ],
@@ -14,7 +14,7 @@
     "react-dom": "^17.0.2"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf dist;tsc",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "prepare": "npm run build"

src/common/colors.ts

@@ -1,6 +1,116 @@
-const colors = {
-    white: '#ffffff',
-    red: '#f44336'
+export const brandColors = {
+    deep: {
+        "900": "#030823",
+        "800": "#091139",
+        "700": "#121B4B",
+        "600": "#092560",
+        "500": "#303B72",
+        "400": "#404C8C",
+        "300": "#4E5CA8",
+        "200": "#4E5CA8",
+        "100": "#A3B0F6",
+    },
+    giv: {
+        "1000": "#02001B",
+        "900": "#090446",
+        "800": "#1B1657",
+        "700": "#211985",
+        "600": "#3811BF",
+        "500": "#5326EC",
+        "400": "#754CFF",
+        "300": "#8668FC",
+        "200": "#B9A7FF",
+        "100": "#E7E1FF",
+        "000": "#FCFCFF",
+    },
+    cyan: {
+        "800": "#007C8F",
+        "700": "#0097AE",
+        "600": "#00AFCB",
+        "500": "#2FC8E0",
+        "400": "#3EDBF3",
+        "300": "#87E7F5",
+        "200": "#BFF4FC",
+    },
+    mustard: {
+        "800": "#C6920C",
+        "700": "#DAA213",
+        "600": "#E8B83D",
+        "500": "#FED670",
+        "400": "#FFE49D",
+        "300": "#FFEEC1",
+        "200": "#FFF7E0",
+    },
+    pinky: {
+        "800": "#AA004F",
+        "700": "#C7035E",
+        "600": "#D81A72",
+        "500": "#E1458D",
+        "400": "#FD67AC",
+        "300": "#FF96C6",
+        "200": "#FFC9E2",
+    },
+    ocean: {
+        "900": "#210095",
+        "800": "#310BB5",
+        "700": "#0038AF",
+        "600": "#0040C9",
+        "500": "#165FFA",
+        "400": "#3E7CFF",
+        "300": "#6496FF",
+        "200": "#A0BFFF",
+    }
 }
 
-export default colors;
+export const semanticColors = {
+    jade: {
+        "700": "#1B8C82",
+        "600": "#2EA096",
+        "500": "#37B4A9",
+        "400": "#5CD3C9",
+        "300": "#7CE8DF",
+        "200": "#A9F8F1",
+        "100": "#D2FFFB",
+    },
+    blueSky: {
+        "700": "#2C66CD",
+        "600": "#0083E0",
+        "500": "#0A91FE",
+        "400": "#24A4FF",
+        "300": "#52B7FF",
+        "200": "#8DD0FF",
+        "100": "#CAE9FF",
+    },
+    punch: {
+        "700": "#C71D06",
+        "600": "#D93119",
+        "500": "#E6492D",
+        "400": "#F96E5B",
+        "300": "#FF8A7A",
+        "200": "#FFB3A9",
+        "100": "#FFD6D0",
+    },
+    golden: {
+        "700": "#EA960D",
+        "600": "#F6AB2F",
+        "500": "#FFBF56",
+        "400": "#FFCD7A",
+        "300": "#FFEAB5",
+        "200": "#FFF3D2",
+        "100": "#FFFBEF",
+    }
+}
+
+export const neutralColors= {
+    gray: {
+        "900": "#1D1E1F",
+        "800": "#4F576A",
+        "700": "#82899A",
+        "600": "#A5ADBF",
+        "500": "#BBC3D4",
+        "400": "#D7DDEA",
+        "300": "#EBECF2",
+        "200": "#F7F7F9",
+        "100": "#FFFFFF",
+    }
+}

src/components/buttons/Button.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { FC } from "react";
+import styled from "styled-components";
+import { brandColors, neutralColors } from "../../common/colors";
+import { ButtonText } from "../typography/ButtonText";
+
+interface IButtonProps {
+  buttonType?: 'primary' | 'secondary' | 'texty';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  label?: string
+}
+
+const ButtonContainer = styled.button<IButtonProps>`
+  border: none;
+  border-radius: 48px;
+  padding: 16px 24px;
+  cursor: pointer;
+  transition: background .3s ease;
+  ${props => {
+    switch (props.buttonType) {
+        case 'primary':
+            return props.disabled ? `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};` :`color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`
+        case 'secondary':
+            return props.disabled ? `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};` :`color: ${neutralColors.gray[100]};background: ${brandColors.giv[500]};`
+        case 'texty':
+            return props.disabled ? `color: ${brandColors.giv[500]};background: unset};padding: 8px 24px;` :`color: ${brandColors.deep[100]};background: unset};padding: 8px 24px;`
+        default:
+            break;
+    }
+  }}
+  :hover {
+    ${props => {
+      if (props.disabled) return '';
+      switch (props.buttonType) {
+          case 'primary':
+              return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[600]};`
+          case 'secondary':
+              return `color: ${neutralColors.gray[100]};background: ${brandColors.giv[700]};`
+          case 'texty':
+              return `color: ${brandColors.deep[100]};background: ${brandColors.giv[700]}};`
+          default:
+              break;
+      }
+    }}
+  }
+`;
+
+
+
+export const Button: FC<IButtonProps> = ({label, size = 'medium', buttonType= 'secondary', disabled = false }) => {
+  return (
+    <ButtonContainer buttonType={buttonType} disabled={disabled}>
+      <ButtonText size={size}>
+        {label}
+      </ButtonText>
+    </ButtonContainer>
+  );
+}