├── .changeset └── config.json ├── .devcontainer └── devcontainer.json ├── .eslintignore ├── .eslintrc.json ├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── dependabot.yml └── workflows │ ├── release.yml │ └── test.yml ├── .gitignore ├── .huskyrc ├── .prettierrc.json ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── babel.config.js ├── docs ├── .eslintignore ├── README.md ├── content │ ├── assets │ │ ├── index.mdx │ │ └── logo.mdx │ ├── components │ │ ├── avatars.mdx │ │ ├── badges.mdx │ │ ├── card.mdx │ │ ├── email-icon.mdx │ │ ├── event-preview.mdx │ │ ├── footer.mdx │ │ ├── github-icon.mdx │ │ ├── header.mdx │ │ ├── icon.mdx │ │ ├── index.mdx │ │ ├── names.mdx │ │ ├── post-preview.mdx │ │ ├── profile-preview.mdx │ │ ├── social-icons.mdx │ │ ├── tags.mdx │ │ ├── twitter-icon.mdx │ │ └── video.mdx │ ├── index.mdx │ └── preset │ │ └── index.mdx ├── gatsby-config.js ├── package.json ├── src │ ├── @primer │ │ └── gatsby-theme-doctocat │ │ │ ├── components │ │ │ └── live-preview-wrapper.js │ │ │ ├── live-code-scope.js │ │ │ └── nav.yml │ ├── components │ │ └── dummy-logo.js │ └── pages │ │ ├── avatars │ │ ├── few-avatars.js │ │ └── many-avatars.js │ │ ├── badges │ │ ├── few-badges.js │ │ └── many-badges.js │ │ ├── card │ │ ├── with-subtitle.js │ │ └── without-subtitle.js │ │ ├── event-preview │ │ ├── grid-of-events.js │ │ ├── render-speakers-with-avatars.js │ │ └── render-speakers-with-names.js │ │ ├── footer │ │ └── undataforum-footer.js │ │ ├── header │ │ ├── logo-and-title.js │ │ ├── many-links-and-button.js │ │ ├── many-links-no-button.js │ │ └── undataforum-header.js │ │ ├── logo │ │ ├── scale-to-height.js │ │ └── scale-to-width.js │ │ ├── names │ │ ├── few-names.js │ │ └── many-names.js │ │ ├── post-preview │ │ ├── grid-of-posts.js │ │ ├── render-authors-with-avatars.js │ │ └── render-authors-with-names.js │ │ ├── profile-preview │ │ ├── align-end.js │ │ ├── align-start.js │ │ ├── complete-profile.js │ │ └── really-long-strings.js │ │ ├── social-icons │ │ ├── align-center.js │ │ ├── align-end.js │ │ └── align-start.js │ │ ├── tags │ │ ├── few-tags.js │ │ └── many-tags.js │ │ └── video │ │ ├── grid-of-videos.js │ │ ├── no-container.js │ │ └── with-container.js └── static │ ├── avatar0.png │ ├── avatar1.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── avatar6.png │ ├── avatar7.png │ ├── avatar8.png │ ├── avatar9.png │ └── emiliano-bar-kheTI8pIywU-unsplash.jpg ├── lint-staged.config.js ├── package.json ├── packages ├── assets │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ └── logo.js │ └── visual-guidelines.pdf ├── components │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ └── src │ │ ├── avatars.js │ │ ├── badges.js │ │ ├── card.js │ │ ├── email-icon.js │ │ ├── event-preview.js │ │ ├── footer.js │ │ ├── github-icon.js │ │ ├── header.js │ │ ├── icon.js │ │ ├── index.js │ │ ├── names.js │ │ ├── new-tab-link.js │ │ ├── post-preview.js │ │ ├── profile-preview.js │ │ ├── social-icons.js │ │ ├── tags.js │ │ ├── twitter-icon.js │ │ ├── util.js │ │ └── video.js └── preset │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ └── src │ └── index.js └── yarn.lock /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "linked": [], 6 | "access": "restricted", 7 | "baseBranch": "master", 8 | "updateInternalDependencies": "patch", 9 | "ignore": [] 10 | } 11 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gatsby on javascript-node:14", 3 | "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:14", 4 | "settings": { 5 | "terminal.integrated.shell.linux": "/bin/bash" 6 | }, 7 | "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"], 8 | "forwardPorts": [8000], 9 | "postCreateCommand": "yarn install", 10 | "containerEnv": { 11 | "GATSBY_TELEMETRY_DISABLED": "1" 12 | }, 13 | "remoteUser": "node" 14 | } 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@maiertech" 3 | } 4 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners 2 | 3 | * @454de6e 4 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . All complaints will be reviewed and investigated promptly 64 | and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: 'npm' 4 | directory: '/' 5 | schedule: 6 | interval: 'monthly' 7 | rebase-strategy: 'disabled' 8 | reviewers: 9 | - '454de6e' 10 | - package-ecosystem: 'github-actions' 11 | directory: '/' 12 | schedule: 13 | interval: 'monthly' 14 | rebase-strategy: 'disabled' 15 | reviewers: 16 | - '454de6e' 17 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | steps: 12 | # Fetch entire Git history so changesets can generate changelogs. 13 | - uses: actions/checkout@master 14 | with: 15 | fetch-depth: 0 16 | # Do not persist GITHUB_TOKEN. 17 | # Prevent personal access token GH_TOKEN from being overridden. 18 | persist-credentials: false 19 | - uses: actions/setup-node@v2.1.5 20 | with: 21 | node-version: '14' 22 | - run: yarn install --frozen-lockfile 23 | - uses: changesets/action@master 24 | with: 25 | version: yarn run version 26 | publish: yarn run release 27 | commit: Publish packages 28 | title: Publish packages 29 | env: 30 | # Use personal access token GH_TOKEN to trigger workflows with changesets/action. 31 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 32 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 33 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | - uses: actions/setup-node@v2.1.5 11 | with: 12 | node-version: '14' 13 | - run: yarn install --frozen-lockfile 14 | - run: yarn run lint 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .env 3 | .eslintcache 4 | .now 5 | dist 6 | node_modules 7 | public 8 | yarn-error.log 9 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "lint-staged", 4 | "pre-push": "yarn run lint" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | "@maiertech/prettier-config" 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll.eslint": true 4 | }, 5 | "editor.defaultFormatter": "esbenp.prettier-vscode", 6 | "editor.formatOnSave": true, 7 | "files.autoSave": "onFocusChange", 8 | "files.associations": { 9 | "*.mdx": "markdown" 10 | }, 11 | "telemetry.enableTelemetry": false 12 | } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @undataforum/design-system 2 | 3 | This monorepo contains the design system for United Nations World Data Forum 4 | websites: 5 | 6 | - [@undataforum/assets](https://github.com/UNDataForum/components/tree/master/packages/components): 7 | requires users to sign a waiver of liability. 8 | - [@undataforum/components](https://github.com/UNDataForum/components/tree/master/packages/components): 9 | licensed under the 10 | [MIT license](https://github.com/UNDataForum/design-system/blob/master/packages/components/LICENSE.md). 11 | - [@undataforum/preset](https://github.com/UNDataForum/components/tree/master/packages/preset): 12 | licensed under the 13 | [MIT license](https://github.com/UNDataForum/design-system/blob/master/packages/preset/LICENSE.md). 14 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/env', '@babel/react'], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # docs 2 | 3 | This is the repository for the docs for all packages that are part of the United 4 | Nations World Data Forum design system: 5 | 6 | - [`@undataforum/assets`](https://github.com/UNDataForum/design-system/tree/master/packages/assets) 7 | - [`@undataforum/components`](https://github.com/UNDataForum/design-system/tree/master/packages/components) 8 | - [`@undataforum/preset`](https://github.com/UNDataForum/design-system/tree/master/packages/preset) 9 | 10 | You can explore the docs at https://design-system.undataforum.org or locally by 11 | running 12 | 13 | ```bash 14 | yarn workspace docs dev 15 | ``` 16 | 17 | ## Credits 18 | 19 | Avatar images used in the docs were created with 20 | [Robohash](https://robohash.org/). Licensing information is available on the 21 | [Robohash GitHub page](https://github.com/e1ven/Robohash). 22 | -------------------------------------------------------------------------------- /docs/content/assets/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: '@undataforum/assets' 3 | --- 4 | 5 | A library of design assets implemented as React components for the United 6 | Nations World Data Forum website. Designed by the awesome people at the 7 | [United Nations Graphic Design Unit](https://www.behance.net/unitednations). 8 | 9 | ## License 10 | 11 | This package is not licensed under the MIT license. Read the 12 | [license information](https://github.com/UNDataForum/design-system/blob/master/packages/assets/visual-guidelines.pdf) 13 | before installing and using this package. 14 | 15 | ## Install 16 | 17 | In order to install this package, run 18 | 19 | ```bash 20 | yarn add @undataforum/assets 21 | ``` 22 | 23 | to add it to your dependencies. Install peer dependencies `react` and 24 | `react-dom`. 25 | 26 | Import the logo like this: 27 | 28 | ```jsx 29 | import { Logo } from '@undataforum/assets'; 30 | ``` 31 | 32 | ## Docs 33 | 34 | Read the docs at https://design-system.undataforum.org/assets. You can run the 35 | docs locally with 36 | 37 | yarn workspace docs run dev 38 | 39 | ## Contributing 40 | 41 | Work with two terminals. In the first terminal run 42 | 43 | yarn workspace @undataforum/assets run watch 44 | 45 | and in the second terminal run 46 | 47 | yarn workspace docs run dev 48 | 49 | The first command watches for changes in the `@undataforum/assets` workspace and 50 | bundles the `@undataforum/assets` package whenever it detects changes. The 51 | second command launches the docs, which use the local `@undataforum/assets` 52 | package as dependency. 53 | -------------------------------------------------------------------------------- /docs/content/assets/logo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Logo 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/assets/src/logo.js 5 | --- 6 | 7 | `Logo` renders the official logo for the United Nations World Data Forum. 8 | 9 | ## Examples 10 | 11 | `Logo` needs to be rendered inside a container that sets height or width 12 | explicitly. You can scale the logo to height or to width. 13 | 14 | In this example we scale to height: 15 | 16 | ```jsx live 17 | 18 | 19 | 20 | ``` 21 | 22 | In this example we scale to width: 23 | 24 | ```jsx live 25 | 26 | 27 | 28 | ``` 29 | 30 | We can set the `monochrome` flag to render the logo with its parent's `color`: 31 | 32 | ```jsx live 33 | 34 | 35 | 36 | ``` 37 | 38 | ## System props 39 | 40 | `Logo` does not support system props. This is because it always needs to be 41 | defined in a container that defines height or width. You can use 42 | [`Box`](https://theme-ui.com/components/box) as container, which supports 43 | [space props](https://styled-system.com/api#space) and 44 | [color props](https://styled-system.com/api#color) from 45 | [Styled System](https://styled-system.com/). 46 | 47 | ## Component props 48 | 49 | | Name | Type | Default | Required | Description | 50 | | :--------- | :------------------ | :------ | :------- | :-------------------------------------------------------- | 51 | | scaleTo | `height` or `width` | | ✓ | Indicate whether to scale the logo to height or to width. | 52 | | monochrome | Boolean | `false` | | Render logo monochrome if `true`. | 53 | 54 | ## Visual regression testing 55 | 56 | The following URLs can be used for visual regression testing: 57 | 58 | - [Scale to height](/logo/scale-to-height) 59 | - [Scale to width](/logo/scale-to-width) 60 | -------------------------------------------------------------------------------- /docs/content/components/badges.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Badges 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/components/src/badges.js 5 | --- 6 | 7 | `Badges` is used to render one or more badges. Unlike 8 | [`Tags`](/components/tags), badges are not linked. 9 | 10 | ## Examples 11 | 12 | Badges align start (left) by default: 13 | 14 | ```jsx live 15 | 19 | ``` 20 | 21 | You can align center: 22 | 23 | ```jsx live 24 | 29 | ``` 30 | 31 | Or align end (right): 32 | 33 | ```jsx live 34 | 39 | ``` 40 | 41 | When you have many badges they wrap: 42 | 43 | ```jsx live 44 | 65 | ``` 66 | 67 | You can still align center: 68 | 69 | ```jsx live 70 | 92 | ``` 93 | 94 | Or align end: 95 | 96 | ```jsx live 97 | 119 | ``` 120 | 121 | You can adjust the gap: 122 | 123 | ```jsx live 124 | 146 | ``` 147 | 148 | ## System props 149 | 150 | `Badges` supports [space props](https://styled-system.com/api#space) and 151 | [color props](https://styled-system.com/api#color) from 152 | [Styled System](https://styled-system.com/). 153 | 154 | ## Component props 155 | 156 | | Name | Type | Default | Required | Description | 157 | | :------ | :------------------------- | :--------------- | :------- | :------------------------------------- | 158 | | values | Array of string | | ✓ | Array of badge names. | 159 | | gap | Number | 2 | | Gap between badges (from space scale). | 160 | | align | `start`, `center` or `end` | `start` | | Alignment (responsive). | 161 | | variant | String | `badges.primary` | | Optional variant for customizations. | 162 | 163 | ## Variants 164 | 165 | If you do not provide a `variant` prop, badges are rendered with the defaults 166 | from Theme UI's 167 | [`Badge`](https://github.com/system-ui/theme-ui/blob/master/packages/components/src/Badge.js). 168 | Its variants are defined under the `badges` key, as explained in the 169 | [docs](https://theme-ui.com/components/badge/). 170 | 171 | If you define customizations for Theme Ui's `Badge`, you can make `Badges` use 172 | these custmoizations by providing the corresponding variant to the `variant` 173 | prop. You can also define you own variants under any other key and provide that 174 | key to `variant`. 175 | 176 | In this example we customize the corners of the badges using default variant 177 | `badges.primary`: 178 | 179 | ```jsx live 180 | 192 | 196 | 197 | ``` 198 | 199 | In this example we define variant `badges.secondary` and apply it to `Badges`: 200 | 201 | ```jsx live 202 | 212 | 217 | 218 | ``` 219 | 220 | ## Visual regression testing 221 | 222 | The following URLs can be used for visual regression testing: 223 | 224 | - [Few badges (themed with `@undataforum/preset`)](/badges/few-badges) 225 | - [Many badges (themed with `@undataforum/preset`)](/badges/many-badges) 226 | -------------------------------------------------------------------------------- /docs/content/components/card.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Card 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/components/src/card.js 5 | --- 6 | 7 | Use a `Card` component to emphasize and structure information. 8 | 9 | ## Examples 10 | 11 | This example shows a card with title and subtitle: 12 | 13 | ```jsx live 14 | Card with subtitle} 16 | subtitle={Sunt veniam commodo id est incididunt} 17 | m={2} 18 | > 19 | 20 | Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum 21 | elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id 22 | deserunt exercitation laboris cillum nisi deserunt occaecat. 23 | 24 | 25 | Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea 26 | culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit 27 | sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim 28 | nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. 29 | Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui 30 | sit. 31 | 32 | 33 | Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. 34 | Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa 35 | laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum 36 | consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod 37 | amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia 38 | magna excepteur id consectetur dolore adipisicing id. 39 | 40 | 41 | ``` 42 | 43 | This example shows a card without subtitle: 44 | 45 | ```jsx live 46 | Card without subtitle} m={2}> 47 | 48 | Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum 49 | elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id 50 | deserunt exercitation laboris cillum nisi deserunt occaecat. 51 | 52 | 53 | Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea 54 | culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit 55 | sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim 56 | nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. 57 | Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui 58 | sit. 59 | 60 | 61 | Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. 62 | Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa 63 | laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum 64 | consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod 65 | amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia 66 | magna excepteur id consectetur dolore adipisicing id. 67 | 68 | 69 | ``` 70 | 71 | This example shows a card with custom color: 72 | 73 | ```jsx live 74 | Card with subtitle} 76 | subtitle={Sunt veniam commodo id est incididunt} 77 | color="secondary" 78 | m={2} 79 | > 80 | 81 | Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum 82 | elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id 83 | deserunt exercitation laboris cillum nisi deserunt occaecat. 84 | 85 | 86 | Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea 87 | culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit 88 | sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim 89 | nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. 90 | Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui 91 | sit. 92 | 93 | 94 | Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. 95 | Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa 96 | laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum 97 | consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod 98 | amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia 99 | magna excepteur id consectetur dolore adipisicing id. 100 | 101 | 102 | ``` 103 | 104 | ## System props 105 | 106 | `Card` supports [space props](https://styled-system.com/api#space) and 107 | [color props](https://styled-system.com/api#color) from 108 | [Styled System](https://styled-system.com/). 109 | 110 | ## Component props 111 | 112 | | Name | Type | Default | Required | Description | 113 | | :------- | :----- | :------ | :------- | :------------------------------------------------------- | 114 | | color | String | primary | | Color needs to have high contrast with background color. | 115 | | title | Node | | ✓ | Component that renders a title (composition pattern). | 116 | | subtitle | Node | | | Component that renders a subtitle (composition pattern). | 117 | | children | Node | | | Children to be rendered inside card. | 118 | 119 | ## Variants 120 | 121 | This component does not support variants. 122 | 123 | ## Visual regression testing 124 | 125 | The following URLs can be used for visual regression testing: 126 | 127 | - [With subtitle (themed with `@undataforum/preset`)](/card/with-subtitle) 128 | - [Without subtitle (themed with `@undataforum/preset`)](/card/without-subtitle) 129 | -------------------------------------------------------------------------------- /docs/content/components/email-icon.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: EmailIcon 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/components/src/email-icon.js 5 | --- 6 | 7 | An `EmailIcon` is a square inline element. 8 | 9 | ## Examples 10 | 11 | The default size is 32 pixels: 12 | 13 | ```jsx live 14 | 15 | ``` 16 | 17 | Use the `size` prop to set a custom size: 18 | 19 | ```jsx live 20 | 21 | ``` 22 | 23 | The `size` prop can also take an array to make the icon's size responsive: 24 | 25 | ```jsx live 26 | 27 | ``` 28 | 29 | Use the `title` prop to set a title that appears when hovering over the icon: 30 | 31 | ```jsx live 32 | 33 | ``` 34 | 35 | Since `EmailIcon` is an inline element, it uses the text color of its parent 36 | element: 37 | 38 | ```jsx live 39 | 40 | 41 | 42 | ``` 43 | 44 | ## System props 45 | 46 | `EmailIcon` supports [space props](https://styled-system.com/api#space) and 47 | [color props](https://styled-system.com/api#color) from 48 | [Styled System](https://styled-system.com/). 49 | 50 | ## Component props 51 | 52 | | Name | Type | Responsive | Default | Description | 53 | | :---- | :----- | :--------- | :------ | :-------------------------------------------------------------- | 54 | | size | Number | yes | 32 | Size in pixels of the square within which the icon is rendered. | 55 | | title | String | no | | Optional hover title. | 56 | 57 | ## Variants 58 | 59 | This component does not support variants. 60 | -------------------------------------------------------------------------------- /docs/content/components/event-preview.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: EventPreview 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/components/src/event-preview.js 5 | --- 6 | 7 | An `EventPreview` is used to display an event in a list of events, e.g., on an 8 | overview page, or as header of an event page. 9 | 10 | ## Examples 11 | 12 | In this example we render speakers with [`Names`](/components/names): 13 | 14 | ```jsx live 15 | 20 | Vestibulum proin eu mi nulla ac enim in tempor turpis 21 | 22 | ), 23 | date: 'October 14, 1983, 1:30 PM EDT (60 minutes)', 24 | speakers: , 25 | href: '/events/vestibulum-proin-eu', 26 | registrationLink: '/register', 27 | }} 28 | m={2} 29 | /> 30 | ``` 31 | 32 | In this example we render speakers with [`Avatars`](/components/avatars) and add 33 | a description: 34 | 35 | ```jsx live 36 | 41 | Vestibulum proin eu mi nulla ac enim in tempor turpis 42 | 43 | ), 44 | date: 'October 14, 1983, 1:30 PM EDT (90 minutes)', 45 | speakers: ( 46 | 56 | ), 57 | name: ( 58 | 59 | Willow Rangall (Moderator) 60 | 61 | ), 62 | href: '/profiles/willow-rangall', 63 | }, 64 | { 65 | id: '561285d3-4eed-473c-baba-6b3564f4e6a7', 66 | avatar: ( 67 | Portrait of Suzy Cahan 72 | ), 73 | name: ( 74 | 75 | Suzy Cahan 76 | 77 | ), 78 | href: '/profiles/suzy-cahan', 79 | }, 80 | { 81 | id: '453d9d8a-b1e6-4cac-9fdd-b6c354fa3262', 82 | avatar: ( 83 | Portrait of Sandra Abramovici 88 | ), 89 | name: ( 90 | 91 | Sandra Abramovici 92 | 93 | ), 94 | href: '/profiles/sandra-abramovici', 95 | }, 96 | ]} 97 | align="start" 98 | mb={3} 99 | /> 100 | ), 101 | description: ( 102 | 103 | Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed 104 | interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu 105 | massa. Donec dapibus. Duis at velit eu est congue elementum. In hac 106 | habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, 107 | diam erat fermentum justo, nec condimentum neque sapien placerat ante. 108 | Nulla justo. 109 | 110 | ), 111 | registrationLink: '/register', 112 | }} 113 | m={2} 114 | /> 115 | ``` 116 | 117 | This is an example of an event without speakers: 118 | 119 | ```jsx live 120 | 125 | Vestibulum proin eu mi nulla ac enim in tempor turpis 126 | 127 | ), 128 | date: '14–15 Oct 1983, 12:00–13:30 EDT', 129 | href: '/events/vestibulum-proin-eu', 130 | registrationLink: '/register', 131 | }} 132 | m={2} 133 | /> 134 | ``` 135 | 136 | ## System props 137 | 138 | `EventPreview` supports [space props](https://styled-system.com/api#space) and 139 | [color props](https://styled-system.com/api#color) from 140 | [Styled System](https://styled-system.com/). 141 | 142 | ## Component props 143 | 144 | | Name | Type | Default | Required | Description | 145 | | :---- | :----- | :------ | :------- | :---------- | 146 | | event | Object | | ✓ | See below. | 147 | 148 | ### Event 149 | 150 | | Name | Type | Default | Required | Description | 151 | | :--------------- | :----- | :------ | :------- | ---------------------------------------------------------------------- | 152 | | tag | String | | | Tag that is dispalyed at the top. | 153 | | title | Node | | ✓ | Component that renders a title (composition pattern). | 154 | | speakers | Node | | | Component that renders speakers (composition pattern). | 155 | | date | String | | ✓ | Formatted event date. | 156 | | description | Node | | | Component that renders a description (composition pattern). | 157 | | href | String | | | Link to event page. Triggers rendering of details button when present. | 158 | | registrationLink | String | | | Link to registration page. Triggers rendering of registration button. | 159 | 160 | `title`, `speakers` and `description` are React components that give you 161 | flexibility in how to render an `EventPreview` without making its component API 162 | too complicated. But this flexibility comes with the responsiblity to manage 163 | margins. Generally, you should use bottom margins only and no top margins: 164 | 165 | - `title` may not have a top margin, only a bottom margin. The bottom margin 166 | spaces it from what follows, either `speakers` or the date. 167 | - `speakers` may not have a top margin, only a bottom margin. The bottom margin 168 | spaces it from the date. 169 | - `description` may not have a top margin, only a bottom margin. The bottom 170 | margin should be zero if it is not followed by a button. 171 | 172 | ## Variants 173 | 174 | You can customize `EventPreview` by defining the following variants in your 175 | theme: 176 | 177 | | Key | Description | 178 | | :----------------------------------- | :-------------------------------------- | 179 | | `event-preview.badge` | Customize optional tag. | 180 | | `event-preview.buttons.event` | Customize optional event button. | 181 | | `event-preview.buttons.registration` | Customize optional registration button. | 182 | 183 | In this example we define above variants in a `ThemeProvider` to customize the 184 | look of the tag and buttons (you would normally do this in your theme): 185 | 186 | ```jsx live 187 | 216 | 221 | Vestibulum proin eu mi nulla ac enim in tempor turpis 222 | 223 | ), 224 | date: 'October 14, 1983, 1:30 PM EDT (60 minutes)', 225 | speakers: , 226 | href: '/events/vestibulum-proin-eu', 227 | registrationLink: '/register', 228 | }} 229 | m={2} 230 | /> 231 | 232 | ``` 233 | 234 | ## Visual regression testing 235 | 236 | The following URLs can be used for visual regression testing: 237 | 238 | - [Render speakers with `Names` (themed with `@undataforum/preset`)](/event-preview/render-speakers-with-names) 239 | - [Render speakers with `Avatars` (themed with `@undataforum/preset`)](/event-preview/render-speakers-with-avatars) 240 | - [Grid of events (themed with `@undataforum/preset`)](/event-preview/grid-of-events) 241 | -------------------------------------------------------------------------------- /docs/content/components/footer.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Footer 3 | status: Experimental 4 | source: https://github.com/UNDataForum/design-system/blob/master/packages/components/src/footer.js 5 | --- 6 | 7 | A `Footer` is used to render a responsive page footer. 8 | 9 | ## Examples 10 | 11 | This example shows a complete footer: 12 | 13 | ```jsx live 14 |