├── .babelrc ├── .csscomb.json ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .nvmrc ├── .stylelintrc ├── LICENSE.md ├── Procfile ├── README.md ├── __mocks__ └── fileMock.js ├── app.json ├── build.sh ├── jest.config.js ├── now.json ├── package-lock.json ├── package.json ├── robots.txt ├── src ├── assets │ ├── background.png │ ├── close.png │ ├── favicon.ico │ ├── icon-board.png │ ├── icon-board.svg │ ├── og_facebook.png │ ├── powerful-prototyping.png │ ├── powerful-prototyping.svg │ ├── systems-deck.png │ ├── twitter_image.jpg │ └── uxpin.png ├── components │ ├── adeleInfo │ │ ├── adele-info.jsx │ │ ├── adele-info.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── adele-info.test.jsx.snap │ │ │ └── adele-info.test.jsx │ ├── arrowButton │ │ ├── arrow-button.jsx │ │ ├── arrow-button.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── arrow-button.test.jsx.snap │ │ │ └── arrow-button.test.jsx │ ├── arrowButtonGroup │ │ ├── arrow-button-group.jsx │ │ ├── arrow-button-group.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── arrow-button-group.test.jsx.snap │ │ │ └── arrow-button-group.test.jsx │ ├── button │ │ ├── button.jsx │ │ ├── button.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── button.test.jsx.snap │ │ │ └── button.test.jsx │ ├── cells │ │ ├── badge.jsx │ │ └── internal-link.jsx │ ├── filterTag │ │ ├── Tests │ │ │ ├── __snapshots__ │ │ │ │ └── filter-tag.test.jsx.snap │ │ │ └── filter-tag.test.jsx │ │ ├── filter-tag.jsx │ │ └── filter-tag.styles.jsx │ ├── filterTagSection │ │ ├── filter-tag-section.jsx │ │ ├── filter-tag-section.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── filter-tag-section.test.jsx.snap │ │ │ └── filter-tag-section.test.jsx │ ├── filters │ │ ├── filters.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── filters.test.jsx.snap │ │ │ └── filters.test.jsx │ ├── footer │ │ ├── footer.jsx │ │ └── footer.styles.jsx │ ├── heading │ │ ├── heading.jsx │ │ ├── heading.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── heading.test.jsx.snap │ │ │ └── heading.test.jsx │ ├── helmetTags │ │ └── helmet-tags.jsx │ ├── icon │ │ ├── icon.jsx │ │ ├── icon.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── icon.test.jsx.snap │ │ │ └── icon.test.jsx │ ├── input │ │ ├── input.jsx │ │ ├── input.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── input.test.jsx.snap │ │ │ └── input.test.jsx │ ├── logo │ │ ├── logo.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── logo.test.jsx.snap │ │ │ └── logo.test.jsx │ ├── navLink │ │ ├── nav-link.jsx │ │ └── nav-link.styles.jsx │ ├── sectionHeader │ │ ├── section-header.jsx │ │ ├── section-header.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── section-header.test.jsx.snap │ │ │ └── section-header.test.jsx │ ├── select │ │ ├── select.jsx │ │ ├── select.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── select.test.jsx.snap │ │ │ └── select.test.jsx │ ├── social │ │ ├── social.jsx │ │ ├── social.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── social.test.jsx.snap │ │ │ └── social.test.jsx │ ├── sorting │ │ ├── sorting.jsx │ │ ├── sorting.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── sorting.test.jsx.snap │ │ │ └── sorting.test.jsx │ ├── table │ │ ├── table.jsx │ │ └── table.styles.jsx │ ├── tableControls │ │ ├── table-controls.jsx │ │ ├── table-controls.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── table-controls.test.jsx.snap │ │ │ └── table-controls.test.jsx │ ├── topBar │ │ ├── tests │ │ │ ├── __snapshots__ │ │ │ │ └── top-bar.test.jsx.snap │ │ │ └── top-bar.test.jsx │ │ ├── top-bar.jsx │ │ └── top-bar.styles.jsx │ └── uxpinPromo │ │ ├── tests │ │ ├── __snapshots__ │ │ │ └── uxpin-promo.test.jsx.snap │ │ └── uxpin-promo.test.jsx │ │ ├── uxpin-promo.jsx │ │ └── uxpin-promo.styles.jsx ├── containers │ ├── appContainer │ │ ├── app-container.jsx │ │ ├── app-container.styles.jsx │ │ └── scroll-to-top.jsx │ ├── detailsPage │ │ ├── data-row.jsx │ │ ├── details-page.jsx │ │ ├── section-data.jsx │ │ └── styled-container.jsx │ ├── headerContainer │ │ ├── header-container.jsx │ │ ├── header-container.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── header-container.test.jsx.snap │ │ │ └── header-container.test.jsx │ ├── infoContainer │ │ ├── info-container.jsx │ │ ├── info-container.styles.jsx │ │ └── tests │ │ │ ├── __snapshots__ │ │ │ └── info-container.test.jsx.snap │ │ │ └── info-container.test.jsx │ └── tableContainer │ │ ├── table-container.jsx │ │ └── table-container.styles.jsx ├── data │ ├── data.json │ └── systems │ │ ├── 201801171632-dropbox.json │ │ ├── 201801171633-royal-canin.json │ │ ├── 201801171634-instacart.json │ │ ├── 201801171635-consumer-financial-protection-bureau.json │ │ ├── 201801171636-auth0.json │ │ ├── 201801171637-priceline.json │ │ ├── 201801171638-mozilla-firefox.json │ │ ├── 201801171639-family-search.json │ │ ├── 201801171640-appear-here.json │ │ ├── 201801171641-estonia.json │ │ ├── 201801171642-help-scout.json │ │ ├── 201801171740-trello.json │ │ ├── 201801171741-ca-technologies.json │ │ ├── 201801171742-mixpanel.json │ │ ├── 201801171743-duolingo.json │ │ ├── 201801171744-envato.json │ │ ├── 201801171745-buzzfeed.json │ │ ├── 201801171746-bring-&-posten.json │ │ ├── 201801171747-future-learn.json │ │ ├── 201801171748-gov.uk.json │ │ ├── 201801171750-heroku.json │ │ ├── 201801171751-hp-enterprise.json │ │ ├── 201801171752-bbc.json │ │ ├── 201801171753-lonely-planet.json │ │ ├── 201801171754-cloudflare.json │ │ ├── 201801171755-morning-star.json │ │ ├── 201801171756-automattic.json │ │ ├── 201801171757-national-instruments.json │ │ ├── 201801171758-openaq.json │ │ ├── 201801171759-pluralsight.json │ │ ├── 201801171800-rei.json │ │ ├── 201801171801-audi.json │ │ ├── 201801171802-co-op.json │ │ ├── 201801171803-seek.json │ │ ├── 201801171804-shopify.json │ │ ├── 201801171805-skyscanner.json │ │ ├── 201801171807-usajobs.json │ │ ├── 201801171808-atlassian.json │ │ ├── 201801171809-salesforce.json │ │ ├── 201801171810-ibm.json │ │ ├── 201801180302-ge-digital.json │ │ ├── 201801182139-quicken-loans.json │ │ ├── 201801191711-liferay.json │ │ ├── 201801192034-18f.json │ │ ├── 201801242039-pegasystems.json │ │ ├── 201801242040-altinn.json │ │ ├── 201801251056-ant-financial.json │ │ ├── 201801262129-acl.json │ │ ├── 201801290138-pivotal.json │ │ ├── 201801290215-financial-times.json │ │ ├── 201801291705-stack-overflow.json │ │ ├── 201801291717-intuit.json │ │ ├── 201801291729-jetbrains.json │ │ ├── 201801302158-github.json │ │ ├── 201802062059-hubspot.json │ │ ├── 201802062318-meetup.json │ │ ├── 201802160443-brainly.json │ │ ├── 201802160502-pusher.json │ │ ├── 201802160516-mesosphere.json │ │ ├── 201802160531-wonderbly.json │ │ ├── 201802160543-opower.json │ │ ├── 201802160555-mapbox.json │ │ ├── 201802160605-barricade.json │ │ ├── 201802160617-eurostar.json │ │ ├── 201803122213-uswitch.json │ │ ├── 201803122322-vmware.json │ │ ├── 201803130008-mongodb.json │ │ ├── 201803130041-microsoft.json │ │ ├── 201803130114-myob.json │ │ ├── 201803281509-studyportals.json │ │ ├── 201804092236-hudl.json │ │ ├── 201804092255-workday.json │ │ ├── 201804092309-gitlab.json │ │ ├── 201804092320-quickbooks.json │ │ ├── 201806120913-sparebank1.json │ │ ├── 201806192028-zendesk.json │ │ ├── 201806192051-pinterest.json │ │ ├── 201806192116-alfabank.json │ │ ├── 201806200642-digital-transformation-agency.json │ │ ├── 201808211600-mozilla.json │ │ ├── 201809181406-auth0.json │ │ ├── 201811291410-vtex.json │ │ ├── 201902251930-government-of-canada.json │ │ ├── 201906052053-bridge.json │ │ ├── 201908081341-canonical.json │ │ ├── 201910042157-servicetitan.json │ │ ├── 201910241745-totvs.json │ │ ├── 201911081335-localtapiola.json │ │ ├── 201911111600-suse.json │ │ ├── 201912091027-engie.json │ │ ├── 201912100751-numl.json │ │ ├── 202001211712-sainsburys.json │ │ ├── 202004071556-istreamplanet.json │ │ ├── 202004091412-nulogy.json │ │ ├── 202004221115-redhat.json │ │ ├── 202005191707-buildit.json │ │ ├── 202006191236-drawbotics.json │ │ ├── 202007220903-finastra.json │ │ ├── 202010302218-twilio.json │ │ ├── 202105261351-sipgate.json │ │ ├── 202106221143-telefonica.json │ │ ├── 202212121118-elia.json │ │ └── 202404031834-kajabi.json ├── helpers │ └── text.js ├── icons │ ├── arrow_up.svg │ ├── chevron.svg │ ├── chevron_base64.js │ ├── close.svg │ ├── facebook.svg │ ├── github.svg │ ├── link.svg │ ├── linkedin.svg │ ├── twitter.svg │ └── uxpin_logo.svg ├── index.html ├── index.js ├── server.js ├── services │ └── data.js └── style_tokens │ └── tokens.js ├── testsConfig └── enzymeConfig.js ├── tools ├── data-builder.js ├── data-rebuilder.js ├── template-builder.js └── utils │ ├── getSystemDataFilePath.js │ ├── getSystemsDataFromSourceFiles.js │ ├── getTemplateStructure.js │ └── getTimestampFromFilePath.js ├── webpack.config.js └── webpack.server.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | "@babel/env" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node.modules/* 2 | **/src/containers2/* 3 | **/src/assets/* 4 | **/src/data/* 5 | **/src/icons/* 6 | **/src/style_tokens/* 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'airbnb', 3 | plugins: ['jest'], 4 | env: { 5 | browser: true, 6 | 'jest/globals': true, 7 | }, 8 | rules: { 9 | 'arrow-body-style': 'off', 10 | 'no-nested-ternary': 'off', 11 | 'no-unused-expressions': ['error', { allowTernary: true }], 12 | 'prefer-destructuring': 'off', 13 | 'class-methods-use-this': 'off', 14 | 'no-mixed-operators': 'off', 15 | 'jsx-a11y/tabindex-no-positive': 'off', 16 | 'import/prefer-default-export': 'off', 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | node_modules 5 | .npm 6 | coverage 7 | build 8 | stats.json 9 | .module-cache 10 | 11 | .DS_Store 12 | .idea 13 | *.iml 14 | .vscode 15 | dist 16 | public 17 | release 18 | 19 | webpack-assets.json 20 | webpack-stats.json 21 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.17.1 -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-standard", 5 | "stylelint-config-styled-components" 6 | ], 7 | "syntax": "scss" 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Marcin Treder 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm run start 2 | -------------------------------------------------------------------------------- /__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; 2 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adele", 3 | "env": { 4 | "NODE_ENV": "production" 5 | }, 6 | "formation": { 7 | "web": { 8 | "quantity": 1 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | yum install libpng-devel 2 | npm i --production 3 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', 4 | }, 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'jsx', 8 | 'JSON', 9 | ], 10 | setupFilesAfterEnv: [ 11 | '/testsConfig/enzymeConfig.js' 12 | ], 13 | setupFiles: [ 14 | '/testsConfig/enzymeConfig.js', 15 | ], 16 | snapshotSerializers: [ 17 | 'enzyme-to-json/serializer', 18 | ], 19 | }; 20 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adele", 3 | "version": 2, 4 | "builds": [ 5 | {"src": "build.sh", "use": "@now/static-build"} 6 | ], 7 | "routes": [ 8 | { "handle": "filesystem"}, 9 | { "src": "/(.*)", "dest": "index.html"} 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adele", 3 | "version": "1.0.0", 4 | "description": "", 5 | "engines": { 6 | "node": "16.17.1" 7 | }, 8 | "main": "index.js", 9 | "scripts": { 10 | "build:server": "NODE_ENV=production webpack --config webpack.server.config.js --mode production --env production", 11 | "build:server:local": "NODE_ENV=development webpack --config webpack.server.config.js", 12 | "build:production": "webpack --mode production --env production", 13 | "build:local": "webpack --mode production --env local", 14 | "serve": "NODE_ENV=development webpack-dev-server --open --progress --hot", 15 | "start": "NODE_ENV=production node dist/server.js", 16 | "data-build": "node tools/data-builder.js", 17 | "data-rebuild": "node tools/data-rebuilder.js", 18 | "postinstall": "npm run data-build && npm run build:production && npm run build:server", 19 | "template-build": "node tools/template-builder", 20 | "posttemplate-build": "npm run data-build", 21 | "test": "jest" 22 | }, 23 | "author": "Marcin Treder", 24 | "license": "MIT", 25 | "dependencies": { 26 | "@babel/core": "^7.19.1", 27 | "@babel/preset-env": "^7.10.4", 28 | "@babel/preset-react": "^7.10.4", 29 | "compression": "^1.7.4", 30 | "copy-webpack-plugin": "^6.0.3", 31 | "enzyme": "^3.11.0", 32 | "enzyme-adapter-react-16": "^1.15.2", 33 | "enzyme-to-json": "^3.5.0", 34 | "eslint": "^7.5.0", 35 | "eslint-config-airbnb": "^18.2.0", 36 | "eslint-loader": "^4.0.2", 37 | "eslint-plugin-import": "^2.22.0", 38 | "eslint-plugin-jest": "^23.18.2", 39 | "eslint-plugin-jsx-a11y": "^6.3.1", 40 | "eslint-plugin-react": "^7.20.4", 41 | "express": "^4.17.1", 42 | "file-loader": "^6.2.0", 43 | "html-webpack-plugin": "^4.3.0", 44 | "jest": "^26.1.0", 45 | "jest-cli": "^26.1.0", 46 | "jest-styled-components": "^7.0.2", 47 | "lodash": "^4.17.19", 48 | "memory-cache": "^0.2.0", 49 | "moment": "^2.27.0", 50 | "prop-types": "^15.7.2", 51 | "raw-loader": "^4.0.2", 52 | "react": "^16.13.1", 53 | "react-dom": "^16.13.1", 54 | "react-helmet": "^6.1.0", 55 | "react-router-dom": "^5.2.0", 56 | "react-svg-inline": "^2.1.1", 57 | "styled-components": "^5.1.1", 58 | "webpack": "^5.74.0", 59 | "webpack-dev-server": "^4.11.1" 60 | }, 61 | "devDependencies": { 62 | "babel-jest": "^29.0.3", 63 | "babel-loader": "^8.2.5", 64 | "babel-polyfill": "^6.26.0", 65 | "babel-preset-env": "^1.7.0", 66 | "babel-preset-react": "^6.24.1", 67 | "webpack-cli": "^4.10.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/background.png -------------------------------------------------------------------------------- /src/assets/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/close.png -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/icon-board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/icon-board.png -------------------------------------------------------------------------------- /src/assets/icon-board.svg: -------------------------------------------------------------------------------- 1 | icon-board -------------------------------------------------------------------------------- /src/assets/og_facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/og_facebook.png -------------------------------------------------------------------------------- /src/assets/powerful-prototyping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/powerful-prototyping.png -------------------------------------------------------------------------------- /src/assets/powerful-prototyping.svg: -------------------------------------------------------------------------------- 1 | powerful-prototyping -------------------------------------------------------------------------------- /src/assets/systems-deck.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/systems-deck.png -------------------------------------------------------------------------------- /src/assets/twitter_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/twitter_image.jpg -------------------------------------------------------------------------------- /src/assets/uxpin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UXPin/adele/c1dce4033d5e8da81e9c8e0179a3dc63e738e774/src/assets/uxpin.png -------------------------------------------------------------------------------- /src/components/adeleInfo/adele-info.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | StyledFooter, 4 | StyledHeader, 5 | StyledText, 6 | StyledSection, 7 | } from './adele-info.styles'; 8 | import NavLink from '../navLink/nav-link'; 9 | 10 | const AdeleInfo = () => ( 11 | 12 | Adele Goldberg. The Icon. 13 | 14 |

15 | No. Adele – the Design Systems Repository, is not named after Adele – the singer. This is 16 | a tribute to one of the most important computer scientists focused on graphic user 17 | interfaces, design patterns and object-oriented programming – 18 | {' '} 19 | 25 | Adele Goldberg 26 | 27 | . 28 |

29 | 30 |

31 | Adele Goldberg worked at XEROX PARC in the 70s and managed the System Concepts Laboratory 32 | where, together with Alan Kay and others, she developed Smalltalk-80 – an object-oriented, 33 | dynamically typed programming language that was meant to power the "human-computer 34 | symbiosis". 35 |

36 |

37 | Needless to say, SmallTalk also pioneered many concepts important to all modern design 38 | systems. Objects in Smalltalk were easily transferable between applications and 39 | customizable. Smalltalk also served as the foundation of PARC's work on graphically 40 | based user interfaces (many GUI concepts have been developed by Adele Goldberg and her 41 | group!). 42 |

43 | 44 |

Thank you Adele!

45 | { 49 | window.scrollTo({ behavior: 'smooth', left: '0', top: '0' }); 50 | }} 51 | /> 52 | 53 | 54 | 55 | ); 56 | 57 | export { AdeleInfo as default }; 58 | -------------------------------------------------------------------------------- /src/components/adeleInfo/adele-info.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { adeleInfo } from '../../style_tokens/tokens'; 3 | 4 | const StyledSection = styled.section` 5 | width: 600px; 6 | margin: 0 auto; 7 | `; 8 | 9 | const StyledHeader = styled.h2` 10 | font-family: ${adeleInfo.typography.fontFamily}; 11 | font-size: ${adeleInfo.typography.sizeHeader}; 12 | color: ${adeleInfo.typography.colorHeader}; 13 | font-weight: ${adeleInfo.typography.weightText}; 14 | text-align: center; 15 | margin: 0; 16 | `; 17 | 18 | const StyledText = styled.span` 19 | display: block; 20 | font-family: ${adeleInfo.typography.fontFamily}; 21 | font-size: ${adeleInfo.typography.sizeText}; 22 | color: ${adeleInfo.typography.colorText}; 23 | font-weight: ${adeleInfo.typography.weightText}; 24 | line-height: calc(${adeleInfo.typography.sizeText} * 2); 25 | margin: 40px auto 0 auto; 26 | `; 27 | 28 | const StyledFooter = styled.footer` 29 | display: flex; 30 | justify-content: space-between; 31 | `; 32 | 33 | export { 34 | StyledFooter, 35 | StyledHeader, 36 | StyledSection, 37 | StyledText, 38 | }; 39 | -------------------------------------------------------------------------------- /src/components/adeleInfo/tests/adele-info.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import AdeleInfo from '../adele-info'; 6 | 7 | it('renders AdeleInfo correctly', () => { 8 | const wrapper = mount(); 9 | expect(wrapper).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/arrowButton/arrow-button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Icon from '../icon/icon'; 5 | import StyledArrowButton from './arrow-button.styles'; 6 | import chevron from '../../icons/chevron.svg'; 7 | 8 | const ArrowButton = ({ 9 | action, 10 | direction, 11 | scrollerInactive, 12 | }) => ( 13 | 14 | {scrollerInactive === direction ? ( 15 | 16 | ) : ( 17 | 18 | )} 19 | 20 | ); 21 | 22 | ArrowButton.propTypes = { 23 | action: PropTypes.func.isRequired, 24 | direction: PropTypes.oneOf(['right', 'left']).isRequired, 25 | scrollerInactive: PropTypes.oneOf(['right', 'left', '']).isRequired, 26 | }; 27 | 28 | export { ArrowButton as default }; 29 | -------------------------------------------------------------------------------- /src/components/arrowButton/arrow-button.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { interactive } from '../../style_tokens/tokens'; 3 | 4 | const StyledArrowButton = styled.button` 5 | appearance: none; 6 | background: none; 7 | border: none; 8 | outline: none; 9 | padding: 0; 10 | 11 | &:focus{ 12 | > span > svg { 13 | fill: ${interactive.colorActive}; 14 | } 15 | } 16 | `; 17 | 18 | export { StyledArrowButton as default }; 19 | -------------------------------------------------------------------------------- /src/components/arrowButton/tests/arrow-button.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import ArrowButton from '../arrow-button'; 6 | 7 | const mockFunc = () => true; 8 | 9 | it('renders arrowButton left correctly', () => { 10 | const wrapper = mount( mockFunc()} direction="left" scrollerInactive="left" />); 11 | expect(wrapper).toMatchSnapshot(); 12 | }); 13 | 14 | it('renders arrowButton right correctly', () => { 15 | const wrapper = mount( mockFunc()} direction="right" scrollerInactive="right" />); 16 | expect(wrapper).toMatchSnapshot(); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/arrowButtonGroup/arrow-button-group.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ArrowButton from '../arrowButton/arrow-button'; 4 | import StyledArrowButtonGroup from './arrow-button-group.styles'; 5 | 6 | const ArrowButtonGroup = ({ action, scrollerInactive }) => ( 7 | 8 | action('left')} 11 | scrollerInactive={scrollerInactive} 12 | /> 13 | action('right')} 16 | scrollerInactive={scrollerInactive} 17 | /> 18 | 19 | ); 20 | 21 | ArrowButtonGroup.propTypes = { 22 | action: PropTypes.func.isRequired, 23 | scrollerInactive: PropTypes.oneOf(['right', 'left', '']).isRequired, 24 | }; 25 | 26 | export { ArrowButtonGroup as default }; 27 | -------------------------------------------------------------------------------- /src/components/arrowButtonGroup/arrow-button-group.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledArrowButtonGroup = styled.div` 4 | display: flex; 5 | align-items: center; 6 | `; 7 | 8 | export { StyledArrowButtonGroup as default }; 9 | -------------------------------------------------------------------------------- /src/components/arrowButtonGroup/tests/arrow-button-group.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import ArrowButtonGroup from '../arrow-button-group'; 6 | 7 | const mockFunc = () => true; 8 | 9 | it('renders arrowButtonGroup correctly', () => { 10 | const wrapper = mount(); 11 | expect(wrapper).toMatchSnapshot(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/button/button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { StyledLink, StyledButton } from './button.styles'; 5 | 6 | const Button = ({ 7 | action, 8 | label, 9 | tab, 10 | targetBlank, 11 | type, 12 | }) => { 13 | if (type === 'link' && targetBlank === true) { 14 | return ( 15 | 16 | {label} 17 | 18 | ); 19 | } 20 | 21 | if (type === 'link' && targetBlank === false) { 22 | return ( 23 | 24 | {label} 25 | 26 | ); 27 | } 28 | 29 | if (type === 'button') { 30 | return ( 31 | 32 | {label} 33 | 34 | ); 35 | } 36 | return false; 37 | }; 38 | 39 | Button.propTypes = { 40 | /* eslint-disable react/forbid-prop-types */ 41 | action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, 42 | label: PropTypes.string.isRequired, 43 | type: PropTypes.oneOf(['link', 'button']).isRequired, 44 | targetBlank: PropTypes.bool, 45 | tab: PropTypes.number, 46 | }; 47 | 48 | Button.defaultProps = { 49 | targetBlank: false, 50 | tab: 0, 51 | }; 52 | 53 | export { Button as default }; 54 | -------------------------------------------------------------------------------- /src/components/button/button.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { button } from '../../style_tokens/tokens'; 3 | 4 | const StyledLink = styled.a` 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | position: relative; 9 | height: 40px; 10 | min-height: 40px; 11 | width: 100%; 12 | max-width: 200px; 13 | background-color: ${button.color}; 14 | border-radius: ${button.border.radius}; 15 | border: 1px solid ${button.border.color}; 16 | 17 | font-family: ${button.typography.fontFamily}; 18 | font-size: ${button.typography.size}; 19 | font-weight: ${button.typography.weight}; 20 | color: white; 21 | text-decoration: none; 22 | 23 | cursor: pointer; 24 | 25 | &:hover { 26 | background-color: ${button.hover}; 27 | border-color: ${button.hover}; 28 | box-shadow: 4px 4px 20px rgba(179, 211, 255, 0.6); 29 | } 30 | &:active { 31 | background-color: ${button.active}; 32 | box-shadow: 'none'; 33 | } 34 | 35 | &:focus { 36 | outline: none; 37 | background-color: ${button.hover}; 38 | } 39 | 40 | transition: all ease-in 0.1s; 41 | `; 42 | 43 | const StyledButton = StyledLink.withComponent('button'); 44 | 45 | export { StyledButton, StyledLink }; 46 | -------------------------------------------------------------------------------- /src/components/button/tests/__snapshots__/button.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders filled Button with button markup correctly 1`] = ` 4 | .c0 { 5 | display: -webkit-box; 6 | display: -webkit-flex; 7 | display: -ms-flexbox; 8 | display: flex; 9 | -webkit-align-items: center; 10 | -webkit-box-align: center; 11 | -ms-flex-align: center; 12 | align-items: center; 13 | -webkit-box-pack: center; 14 | -webkit-justify-content: center; 15 | -ms-flex-pack: center; 16 | justify-content: center; 17 | position: relative; 18 | height: 40px; 19 | min-height: 40px; 20 | width: 100%; 21 | max-width: 200px; 22 | background-color: #006cff; 23 | border-radius: 25px; 24 | border: 1px solid #006cff; 25 | font-family: proxima-nova,Proxima Nova,Helvetica Neue,Helvetica,Arial,sans-serif; 26 | font-size: 16px; 27 | font-weight: 300; 28 | color: white; 29 | -webkit-text-decoration: none; 30 | text-decoration: none; 31 | cursor: pointer; 32 | -webkit-transition: all ease-in 0.1s; 33 | transition: all ease-in 0.1s; 34 | } 35 | 36 | .c0:hover { 37 | background-color: #3389ff; 38 | border-color: #3389ff; 39 | box-shadow: 4px 4px 20px rgba(179,211,255,0.6); 40 | } 41 | 42 | .c0:active { 43 | background-color: #0061e6; 44 | box-shadow: 'none'; 45 | } 46 | 47 | .c0:focus { 48 | outline: none; 49 | background-color: #3389ff; 50 | } 51 | 52 | 70 | 71 | 72 | `; 73 | -------------------------------------------------------------------------------- /src/components/button/tests/button.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import Button from '../button'; 6 | 7 | const mockFunc = () => true; 8 | 9 | it('renders filled Button with button markup correctly', () => { 10 | const wrapper = mount( 129 | 130 | 131 | 132 | 133 | `; 134 | -------------------------------------------------------------------------------- /src/components/filterTagSection/tests/filter-tag-section.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import FilterTagSection from '../filter-tag-section'; 6 | 7 | const testString = 'test-string'; 8 | const mockFunc = () => true; 9 | 10 | it('renders FilterTagSection with 3 filters correctly', () => { 11 | const wrapper = mount(); 16 | expect(wrapper).toMatchSnapshot(); 17 | }); 18 | 19 | 20 | it('renders FilterTagSection with 0 filters correctly', () => { 21 | const wrapper = mount(); 26 | expect(wrapper).toMatchSnapshot(); 27 | }); 28 | 29 | it('renders FilterTagSection with 1 filters correctly', () => { 30 | const wrapper = mount(); 35 | expect(wrapper).toMatchSnapshot(); 36 | }); 37 | -------------------------------------------------------------------------------- /src/components/filters/filters.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import React from 'react'; 4 | import PropTypes from 'prop-types'; 5 | 6 | import Input from '../input/input'; 7 | import Select from '../select/select'; 8 | 9 | const Filters = (props) => { 10 | /* 11 | * To decide whether or and therefore for 29 | */ 30 | const uniques = {}; 31 | uniques[props.category] = {}; 32 | const set = new Set(values); 33 | uniques[props.category].size = set.size; 34 | uniques[props.category].values = []; 35 | set.forEach((e) => { 36 | uniques[props.category].values.push(e); 37 | }); 38 | /* 39 | * If number of uniques is higher than 3 a function getSelect() is called. 40 | * This function returns select with unique options for every category 41 | */ 42 | const getSelect = (item, uniqueProperties) => { 43 | const options = uniqueProperties[item].values.sort((a, b) => { 44 | const dataA = a.toLowerCase(); 45 | const dataB = b.toLowerCase(); 46 | 47 | if (dataA === 'no') { 48 | return 1; 49 | } 50 | 51 | if (dataB === 'no') { 52 | return -1; 53 | } 54 | /* eslint-disable no-nested-ternary */ 55 | return dataA < dataB ? -1 : dataA > dataB ? 1 : 0; 56 | }); 57 | 58 | return ( 59 | { 84 | props.filter(props.category, e.target.value); 85 | }} 86 | value={props.values[props.category] ? props.values[props.category] : ''} 87 | /> 88 | ) : ( 89 | getSelect(props.category, uniques) 90 | ); 91 | }; 92 | /* eslint-disable react/forbid-prop-types */ 93 | /* some of the props expect dynamically built objects 94 | ** hence - PropTypes.object. Describing the structure of 95 | ** data would be impossible and limiting. 96 | */ 97 | Filters.propTypes = { 98 | dataf: PropTypes.array.isRequired, 99 | filter: PropTypes.func.isRequired, 100 | values: PropTypes.object.isRequired, 101 | category: PropTypes.string.isRequired, 102 | tab: PropTypes.number, 103 | }; 104 | 105 | Filters.defaultProps = { 106 | tab: 0, 107 | }; 108 | 109 | export { Filters as default }; 110 | -------------------------------------------------------------------------------- /src/components/filters/tests/filters.test.jsx: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import React from 'react'; 3 | import 'jest-styled-components'; 4 | 5 | import Filters from '../filters'; 6 | import data from '../../../data/data.json'; 7 | 8 | const category = 'company'; 9 | const values = { codeDepth: 'css', repository: 'bitbucket' }; 10 | const dataArr = Array.from(data); 11 | 12 | const mockFunc = () => true; 13 | 14 | it('renders Filters correctly', () => { 15 | const wrapper = mount(); 21 | expect(wrapper).toMatchSnapshot(); 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/footer/footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledFooter, StyledTextSection } from './footer.styles'; 3 | import Logo from '../logo/logo'; 4 | 5 | const Footer = () => { 6 | const currentYear = new Date().getFullYear(); 7 | return ( 8 | 9 | 10 |

11 | 2010 – 12 | {currentYear} 13 | {' '} 14 | UXPin INC 15 |

16 | 17 |
  • Maintained by Marcin Treder.
    • 18 |
  • 19 | Inspired by 20 | {' '} 21 | 26 | Awesome Design Systems 27 | 28 | {' '} 29 | by Alex Pate. 30 |
    • 31 |
  • 32 | Great design systems resources: 33 | {' '} 34 | 35 | Styleguides.io 36 | 37 |
    • 38 |     39 |     40 | ); 41 | }; 42 | 43 | export { Footer as default }; 44 | -------------------------------------------------------------------------------- /src/components/footer/footer.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { footer } from '../../style_tokens/tokens'; 3 | 4 | const StyledFooter = styled.footer` 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: center; 8 | align-items: center; 9 | width: 100%; 10 | height: 210px; 11 | margin-top: 140px; 12 | border-top: 1px solid #f8f8f8; 13 | padding: 10px 0 10px 0; 14 | 15 | font-family: ${footer.fontFamily}; 16 | font-size: ${footer.size}; 17 | font-weight: ${footer.weight}; 18 | color: ${footer.color}; 19 | `; 20 | 21 | const StyledTextSection = styled.ul` 22 | display: inline-block; 23 | 24 | li { 25 | display: inline-block; 26 | margin-right: 5px; 27 | } 28 | `; 29 | 30 | export { StyledFooter, StyledTextSection }; 31 | -------------------------------------------------------------------------------- /src/components/heading/heading.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import Button from '../button/button'; 5 | import NavLink from '../navLink/nav-link'; 6 | 7 | import { StyledHeading, StyledLinksWrapper } from './heading.styles'; 8 | 9 | const Heading = ({ scroll }) => { 10 | function scrollTo(destination) { 11 | const scrollDestination = () => { 12 | if (typeof destination === 'number') { 13 | return destination; 14 | } 15 | 16 | const target = document.getElementById(destination); 17 | const targetToTop = target.getBoundingClientRect().top; 18 | const topBarHeight = document.getElementById('top-bar').getBoundingClientRect().height; 19 | const scrollTarget = targetToTop - topBarHeight - 45; 20 | return scrollTarget; 21 | }; 22 | 23 | window.scrollTo({ behavior: 'smooth', left: '0', top: `${scrollDestination()}` }); 24 | } 25 | 26 | return ( 27 | 28 |

    Adele

    29 | The repository of publicly available design systems and pattern libraries 30 | 31 |