From 795e9e9ea7abc5bae93e6cebfbbb3f8f2b0f7ed8 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Mon, 29 Jun 2020 17:59:30 +0200 Subject: [PATCH] added ContactDetails component --- package-lock.json | 576 ++++++++++++++++++ package.json | 3 +- .../ContactDetails/index.stories.tsx | 11 + src/components/ContactDetails/index.tsx | 90 +++ src/components/index.ts | 1 + 5 files changed, 680 insertions(+), 1 deletion(-) create mode 100644 src/components/ContactDetails/index.stories.tsx create mode 100644 src/components/ContactDetails/index.tsx diff --git a/package-lock.json b/package-lock.json index a353512..9ce2ea4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5981,6 +5981,534 @@ } } }, + "@styled-icons/boxicons-logos": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-logos/-/boxicons-logos-10.5.0.tgz", + "integrity": "sha512-+GEzpvl+4DIfe6EDibNlKiOF7CYnhu09XozfrE+RKm1wyjCTtdO3tJqPxkbj/bCB7AvabnfNjmI56koVz72rNw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/boxicons-regular": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-regular/-/boxicons-regular-10.5.0.tgz", + "integrity": "sha512-CKCzOCDiS54zbQZJ8tH8GlfZcqzsap/oG8iNr5h/wzFik4dpMpnkVNZ849htj/HXHf+JgG9DBDZcO2B3TodayQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/boxicons-solid": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-solid/-/boxicons-solid-10.5.0.tgz", + "integrity": "sha512-w8xQjmnLMfFskj1aJ85+SB53m0+5PKZylQAETIxQWqlXIO1UjB/AI4boZsUj4L+PNIYYWSZfKF2mxMJBFSd5/A==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/crypto": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/crypto/-/crypto-10.5.0.tgz", + "integrity": "sha512-mRdCCcor7gE+FQ+3TdkSPEbNurjaBVga4ZufNkIP0qf75/+yXZEFhpVNe1FO8ljR/r1euzX8JfxVv2q+eOtIZA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/entypo": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/entypo/-/entypo-10.5.0.tgz", + "integrity": "sha512-t+rsa0afypNmJKDHzQiEoVZDorUemUR6HDIlnZg/ADblauA79019JgEe+Eu9uMYjzW+ozk7vHeE3goLX5fGnQA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/entypo-social": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/entypo-social/-/entypo-social-10.5.0.tgz", + "integrity": "sha512-affyCQpRhG8Z5H3slKG4nGA4y7ieMJcUqFvCrcrhIMn3h2FqeAmMCcksss7OKMfpuXkxKMR2zAiu9pl+mQ39ag==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/evaicons-outline": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/evaicons-outline/-/evaicons-outline-10.5.0.tgz", + "integrity": "sha512-wbwZsT9QXVblQXSXx69y3DfffKC2P/A5uYKqDcuQzduG55WBa9pTuBUDFlr205B/1YI6iaJXTVVXsyIOH4P4Uw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/evaicons-solid": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/evaicons-solid/-/evaicons-solid-10.5.0.tgz", + "integrity": "sha512-zWFP/Z02I1czXiRCnmGrmb3Y8M8RX/yZE8KRe0M59c9suJrnYQO+TtA5zW2OJdyTxbdEUrRubhMUHW2ZMV6x1Q==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/evil": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/evil/-/evil-10.5.0.tgz", + "integrity": "sha512-A2T5SI7TYqGRxP0hKz1D2eX79IQFFCIWpNjv3Ilf0eEmOUtQXX5N/UvCPyQoKx8OAgZlMFn2usuOYXqq6o3/Bw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/fa-brands": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/fa-brands/-/fa-brands-10.5.0.tgz", + "integrity": "sha512-yM5BDgf5nrt8WsYrH3lQNRWIvZKmko9/S3IUN52/dGHwVhnSeFknFq9G3kjIoPq7dvPDJbil+qOPebihlVW0Jg==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/fa-regular": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/fa-regular/-/fa-regular-10.5.0.tgz", + "integrity": "sha512-brXxuu4qWgxL1brYdALJWqZB/6ubCEuMK8p03f/SuTVKJ9cCVDt2WNd/4R5O1MDah04pSTW8EBVnARJp/DsBdQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/fa-solid": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/fa-solid/-/fa-solid-10.5.0.tgz", + "integrity": "sha512-fvSFi8r1gY26sd+4wk/ptFpwDCV3jlhI7iFlGXGkpwmidHhXyuUxIbpCm9bhTbNHhgSivNUbhKGqGI5Mvk54uA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/feather": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/feather/-/feather-10.5.0.tgz", + "integrity": "sha512-sxD1tunCEukdiVvCOF6Zvt5N5jWh2r36pYfbnWX9hcSE9IJ/8FoEx92zMw06137Fm5rZF4p/UpuWOCxk/+iCpQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/foundation": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/foundation/-/foundation-10.5.0.tgz", + "integrity": "sha512-fgnSGrOMad9CyhKHBAiHMbfVbSQ1S2or9Ca+6JfcDcIJtV5TKg610FDTtrpkoUTbLgxXdCLSw3vNO77/kvq27A==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/heroicons-outline": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-outline/-/heroicons-outline-10.5.0.tgz", + "integrity": "sha512-ttikNw0UxYKuPiRyh3UY9r+bBn8vKt9KhduwHeJJsBIbLiWpJxXJmaPEyxHGCVRAbZLH5GAHb3885oFS9VB7vg==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/heroicons-solid": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.5.0.tgz", + "integrity": "sha512-2jLcs1t3MvULlwpecJ9hB31tr/z0Z0XUWNIOGT7x93R5AiE4/C6KXyoeRnT08LTgoBGjMimi+C1rJg2Z5cXr7w==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/icomoon": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/icomoon/-/icomoon-10.5.0.tgz", + "integrity": "sha512-G2+2W3R1X0A+TN7Kq1CrD6o3OlB2xiI3OnRMH3ZbKvafASKCkU16PwjB8oKulwqRt9c/x7vEYEAVPM7N3b+xng==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/ionicons-outline": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/ionicons-outline/-/ionicons-outline-10.5.0.tgz", + "integrity": "sha512-FJMNbAUedENwFnBplRdH9UWrXoZ5pljhVNSSElRjNllp0G5WdxQEjdahC/6HnNeioPMbDMK+BaBsBmR56PdkIw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/ionicons-sharp": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/ionicons-sharp/-/ionicons-sharp-10.5.0.tgz", + "integrity": "sha512-hIofh94BA8PFq2w+QMvt+TN9oNuEeozOAgysQjZvs3uipCP0xYaRVrxiKH+BsVz0g49fZqGJ1tcN90xq6zsR3A==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/ionicons-solid": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/ionicons-solid/-/ionicons-solid-10.5.0.tgz", + "integrity": "sha512-XNoffVUQaK/1AjmYzd8ZjzSBs9fgMI6O+cnMYPCWZLOMJQQXa0svoWL8+9Vxnb95vS1D+vJSp+N5WPrgI3mDhw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/material": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/material/-/material-10.5.0.tgz", + "integrity": "sha512-fDLBYuOZ7Jfd/3IQB227qzp7yPW81YjfV2Nr8fk1w7bjM/AlXi7uwbkIYesvcazink6OuTyoY13Hweixjds/HA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/material-outlined": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/material-outlined/-/material-outlined-10.5.0.tgz", + "integrity": "sha512-HRDjuDVTIy0LSf8JzZW0aFx7qfGlznkEf3ofnpIeecvbBO8WFojnQDAcdsSKmfwsiL3SKJ64jPZgMVQb6ulvmQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/material-rounded": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/material-rounded/-/material-rounded-10.5.0.tgz", + "integrity": "sha512-fr7SQOGwMyAHkqRg/9vT/z/khUCq1i69bbkvk2bo8kk3K3gp02DRfGq5yz9rEiQtE9twZBvxhN0q6UgUw7a9xw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/material-sharp": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/material-sharp/-/material-sharp-10.5.0.tgz", + "integrity": "sha512-2WyzY1Y7oJ55kMBpm9dT6E9d1xuMvxxG+1oO7kSYOqwFH2Tezh7vLa9NP+a3HGIYJDxV/vNtSZeNEr/W/PZF4w==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/material-twotone": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/material-twotone/-/material-twotone-10.5.0.tgz", + "integrity": "sha512-YB51u3PvB3GMofw7j0pFjDeK9H0PCA3e3WHXTRPQA6Cs4tCY+rjOdE2uV5XphvQ+uWqvCTvnxg0nQktLBjaK2g==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/octicons": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/octicons/-/octicons-10.5.0.tgz", + "integrity": "sha512-uSU+zMcdzaLsHOiZgbQC8SiQ31juB5Kqmk7CUUQfNOY7fXlBJJK/KV8z5sQEJNZVkIfxng5Y2RSQ7dLjVwxnxQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/open-iconic": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/open-iconic/-/open-iconic-10.5.0.tgz", + "integrity": "sha512-e/ia9CnNSDaAD1EHc8FmozcZGQRxayLEQkdpH930mzH39kGJdRlB2JyADPOXpU7ABiFMqvCft2iruDfE070UGA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/remix-fill": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/remix-fill/-/remix-fill-10.5.0.tgz", + "integrity": "sha512-fuUcW9kidSQTlViF8seJX3iIaJeRX9rH44O9vP7O54k4jeq8dGOZWkVU4fVQ7AQnSxFNb4AgmY7RVf4/lk0pgA==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/remix-line": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/remix-line/-/remix-line-10.5.0.tgz", + "integrity": "sha512-yNSF7c2foP/z4nwbcXk3R9VYGBn4Riae+QTiMdxbokC4w30sLnj4nvGviLsxk/2thqDQKNKziNiNOyZAJ0C2jQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/simple-icons": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/simple-icons/-/simple-icons-10.5.0.tgz", + "integrity": "sha512-TCeGYqmAxF6sfjJ+WcYgtm4yqaSrWMOkKY0TyLFc2nE3/Kab96XvV3ME+8U8fP8oJmNdKkO36rXoVSCFbaOLEQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/styled-icon": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.5.0.tgz", + "integrity": "sha512-CPH5drKMPOEah7JnF8t875heP0XPetbLaoQVPmYXQaW8crmWdnt20y9IXlVRHCYaxWZRMCB43Dav84IR04/1FQ==", + "requires": { + "@emotion/is-prop-valid": "^0.8.7", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/typicons": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/typicons/-/typicons-10.5.0.tgz", + "integrity": "sha512-ec3oEDUxgzSeZwrrdR+gYdhkOTwLfoTe+hrbuT1azaqs9eJTGlHoxxfWJNffXT8FPUrdDDL+M1tuyxdQ/HnJtw==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, + "@styled-icons/zondicons": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@styled-icons/zondicons/-/zondicons-10.5.0.tgz", + "integrity": "sha512-0auihVozaCSt6qUsQle9aU8j1YIa9IWhZPJ6sh22B0JtRn3Ohbsk+p2fuvZyFuWg36TU9SSQfKHzmRLvDLbdCQ==", + "requires": { + "@styled-icons/styled-icon": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -23309,6 +23837,54 @@ "supports-color": "^5.5.0" } }, + "styled-icons": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/styled-icons/-/styled-icons-10.5.0.tgz", + "integrity": "sha512-BzyqtsjM/Iup7d6U3DWFods+hI4fXNE3ezEu/a+ul+XLWyWOLwdcCuE/IMXOC9a9RmFa6MSD3cUl2vaGPiN6mA==", + "requires": { + "@styled-icons/boxicons-logos": "^10.5.0", + "@styled-icons/boxicons-regular": "^10.5.0", + "@styled-icons/boxicons-solid": "^10.5.0", + "@styled-icons/crypto": "^10.5.0", + "@styled-icons/entypo": "^10.5.0", + "@styled-icons/entypo-social": "^10.5.0", + "@styled-icons/evaicons-outline": "^10.5.0", + "@styled-icons/evaicons-solid": "^10.5.0", + "@styled-icons/evil": "^10.5.0", + "@styled-icons/fa-brands": "^10.5.0", + "@styled-icons/fa-regular": "^10.5.0", + "@styled-icons/fa-solid": "^10.5.0", + "@styled-icons/feather": "^10.5.0", + "@styled-icons/foundation": "^10.5.0", + "@styled-icons/heroicons-outline": "^10.5.0", + "@styled-icons/heroicons-solid": "^10.5.0", + "@styled-icons/icomoon": "^10.5.0", + "@styled-icons/ionicons-outline": "^10.5.0", + "@styled-icons/ionicons-sharp": "^10.5.0", + "@styled-icons/ionicons-solid": "^10.5.0", + "@styled-icons/material": "^10.5.0", + "@styled-icons/material-outlined": "^10.5.0", + "@styled-icons/material-rounded": "^10.5.0", + "@styled-icons/material-sharp": "^10.5.0", + "@styled-icons/material-twotone": "^10.5.0", + "@styled-icons/octicons": "^10.5.0", + "@styled-icons/open-iconic": "^10.5.0", + "@styled-icons/remix-fill": "^10.5.0", + "@styled-icons/remix-line": "^10.5.0", + "@styled-icons/simple-icons": "^10.5.0", + "@styled-icons/styled-icon": "^10.5.0", + "@styled-icons/typicons": "^10.5.0", + "@styled-icons/zondicons": "^10.5.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz", + "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==" + } + } + }, "styled-jsx": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.0.tgz", diff --git a/package.json b/package.json index a01cb3d..437119d 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "react": "^16.13", "react-dom": "^16.13", "react-uid": "^2.3.0", - "styled-components": "latest" + "styled-components": "latest", + "styled-icons": "^10.5.0" }, "devDependencies": { "@babel/core": "latest", diff --git a/src/components/ContactDetails/index.stories.tsx b/src/components/ContactDetails/index.stories.tsx new file mode 100644 index 0000000..533a91d --- /dev/null +++ b/src/components/ContactDetails/index.stories.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { ContactDetails } from './index'; + +export default { title: 'Contact Details' }; + +export const withDefault = (): JSX.Element => ; +withDefault.story = { name: 'default' }; + +export const withLight = (): JSX.Element => ; +withLight.story = { name: 'light' }; diff --git a/src/components/ContactDetails/index.tsx b/src/components/ContactDetails/index.tsx new file mode 100644 index 0000000..d78748f --- /dev/null +++ b/src/components/ContactDetails/index.tsx @@ -0,0 +1,90 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Github, Linkedin } from '@styled-icons/fa-brands'; +import { color, bp } from '../../theme'; + +export type ContactDetailsVariant = 'light' | 'dark'; + +interface Props { + variant?: ContactDetailsVariant; +} + +const ContactDetailsWrapper = styled.address` + display: inline-block; + color: ${({ variant }) => (variant === 'light' ? color.light : color.dark)}; + font-style: normal; + text-align: center; + @media screen and (min-width: ${bp.tablet}) { + text-align: right; + } +`; + +const ContactLink = styled.a` + display: inline-block; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 15px; + text-decoration: none; +`; + +const EmailAddress = styled.a` + color: inherit; + font-size: 15px; + font-weight: bold; + text-decoration: none; +`; + +const GithubIcon = styled(Github)` + color: ${({ variant }) => (variant === 'light' ? color.primary : color.dark)}; +`; + +const LinkedinIcon = styled(Linkedin)` + color: ${({ variant }) => (variant === 'light' ? color.primary : color.dark)}; +`; + +const Address = styled.p` + font-size: 10px; +`; + +const Tlf = styled.a` + display: inline-block; + font-size: 10px; + font-weight: bold; + text-decoration: none; + color: inherit; + margin-bottom: 10px; +`; + +const Separator = styled.span` + margin-left: 10px; + margin-right: 10px; +`; + +export const ContactDetails: React.FC = ({ variant }) => ( + + hi@wombak.xyz +
+ + + + + + +
+
+ +34 968 00 00 00 + / + +34 619 47 97 05 +
+ Calle Plateria, 29 2 +
+ Murcia 30001 +
+ Spain +
+
+ +); diff --git a/src/components/index.ts b/src/components/index.ts index 8d47210..70f978f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,3 +3,4 @@ export { Text } from './Text'; export { Button } from './Button'; export { Header } from './Header'; export { Logo } from './Logo'; +export { ContactDetails } from './ContactDetails';