├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── docz ├── Calcite_Icons.mdx ├── Customizing_Calcite.mdx ├── DoczCalciteTheme.js ├── Getting_Started.mdx ├── GuideExample.js ├── IconDemo.js ├── ThemeWrapper.js ├── _sampleJson │ ├── states.json │ └── states_objects.json ├── esriColors.json ├── images │ ├── ESRI_Logo_Black.svg │ ├── bridge-circle.png │ ├── bridge3.jpg │ ├── city_map.png │ ├── codyProfile.jpeg │ └── subNav-greenBlue-bg.png └── public │ ├── favicon.png │ └── logo.svg ├── doczrc.js ├── package-lock.json ├── package.json ├── scripts ├── build-docs.js └── copy-files.js └── src ├── Accordion ├── Accordion-styled.js ├── Accordion.js ├── AccordionContent.js ├── AccordionSection.js ├── AccordionTitle.js ├── doc │ └── Accordion.mdx └── index.js ├── AccountTile ├── AccountTile-styled.js ├── AccountTile.js ├── doc │ └── AccountTile.mdx └── index.js ├── ActionBar ├── Action.js ├── ActionBar-styled.js ├── ActionBar.js ├── ActionGroup.js ├── BottomActionGroup.js ├── CollapseAction.js ├── doc │ └── ActionBar.mdx └── index.js ├── Alert ├── Alert-styled.js ├── Alert.js ├── doc │ └── Alert.mdx └── index.js ├── ArcgisAccount ├── ArcgisAccount-styled.js ├── ArcgisAccount.js ├── ArcgisAccountContentInfo.js ├── ArcgisAccountContentMenu.js ├── ArcgisAccountControl.js ├── ArcgisAccountMenu.js ├── ArcgisAccountMenuItem.js ├── accountManagerStorageUtils.js ├── accountManagerUtils.js ├── doc │ ├── ArcgisAccount.mdx │ ├── portal.json │ └── user.json ├── index.js └── useAccountManager.js ├── ArcgisItemCard ├── ArcgisItemCard-styled.js ├── ArcgisItemCard.js ├── doc │ ├── ArcgisItemCard.mdx │ └── item.json └── index.js ├── ArcgisShare ├── ArcgisShare-styled.js ├── ArcgisShare.js ├── doc │ ├── ArcgisShare.mdx │ ├── item.json │ ├── portal.json │ ├── user-noGroups.json │ └── user.json └── index.js ├── Avatar ├── Avatar-styled.js ├── Avatar.js ├── doc │ ├── Avatar.mdx │ └── codyProfile.jpeg └── index.js ├── Breadcrumbs ├── Breadcrumbs-styled.js ├── Breadcrumbs.js ├── Crumb.js ├── doc │ └── Breadcrumbs.mdx └── index.js ├── Button ├── Button-styled.js ├── Button.js ├── ButtonGroup.js ├── doc │ └── Button.mdx └── index.js ├── CalciteThemeProvider ├── CalciteTheme.js ├── CalciteThemeProvider.js ├── EsriColors.js └── index.js ├── Card ├── Card-styled.js ├── Card.js ├── CardContent.js ├── CardImage.js ├── CardTitle.js ├── doc │ ├── Card-propsTable.js │ └── Card.mdx └── index.js ├── Checkbox ├── Checkbox-styled.js ├── Checkbox.js ├── doc │ └── Checkbox.mdx └── index.js ├── ComboButton ├── ComboButton-styled.js ├── ComboButton.js ├── doc │ └── ComboButton.mdx └── index.js ├── CopyToClipboard ├── CopyToClipboard-styled.js ├── CopyToClipboard.js ├── doc │ └── CopyToClipboard.mdx └── index.js ├── DatePicker ├── DatePicker-styled.js ├── DatePicker.js ├── DateRangePicker.js ├── docs │ └── DatePicker.mdx └── index.js ├── Drawer ├── Drawer-styled.js ├── Drawer.js ├── doc │ ├── Drawer-propsTable.js │ └── Drawer.mdx └── index.js ├── Elements ├── Elements-styled.js ├── doc │ └── Elements.mdx └── index.js ├── FileUploader ├── FileUploader-styled.js ├── FileUploader.js ├── doc │ └── FileUploader.mdx └── index.js ├── Form ├── Fieldset.js ├── Form-styled.js ├── Form.js ├── FormControl.js ├── FormControlLabel.js ├── FormHelperText.js ├── Legend.js ├── doc │ └── Form.mdx └── index.js ├── Label ├── Label-styled.js ├── Label.js ├── doc │ └── Label.mdx └── index.js ├── List ├── List-styled.js ├── List.js ├── ListHeader.js ├── ListItem.js ├── ListItemSubtitle.js ├── ListItemTitle.js ├── doc │ └── List.mdx └── index.js ├── Loader ├── Loader-styled.js ├── Loader.js ├── doc │ └── Loader.mdx └── index.js ├── Menu ├── Menu-styled.js ├── Menu.js ├── MenuItem.js ├── MenuTitle.js ├── doc │ ├── Menu-propsTable.js │ └── Menu.mdx └── index.js ├── Modal ├── Modal-styled.js ├── Modal.js ├── doc │ └── Modal.mdx └── index.js ├── MultiSelect ├── MultiSelect-styled.js ├── MultiSelect.js ├── MultiSelectMenu.js ├── doc │ └── MultiSelect.mdx └── index.js ├── Panel ├── Panel-styled.js ├── Panel.js ├── PanelText.js ├── PanelTitle.js ├── doc │ └── Panel.mdx └── index.js ├── Popover ├── Popover-styled.js ├── Popover.js ├── PopoverPopper.js ├── PopoverStyles.css ├── doc │ └── Popover.mdx └── index.js ├── Progress ├── Progress-styled.js ├── Progress.js ├── doc │ └── Progress.mdx └── index.js ├── Radio ├── Radio-styled.js ├── Radio.js ├── doc │ └── Radio.mdx └── index.js ├── Search ├── Search-styled.js ├── Search.js ├── SearchMenu.js ├── doc │ ├── Search.mdx │ └── StyledSearch.js └── index.js ├── Select ├── Select-styled.js ├── Select.js ├── SelectMenu.js ├── doc │ └── Select.mdx └── index.js ├── SideNav ├── SideNav-styled.js ├── SideNav.js ├── SideNavLink.js ├── SideNavTitle.js ├── doc │ └── SideNav.mdx └── index.js ├── Slider ├── Slider-styled.js ├── Slider.js ├── doc │ └── Slider.mdx └── index.js ├── Stepper ├── Step.js ├── StepDescription.js ├── StepIcon.js ├── StepTitle.js ├── Stepper-styled.js ├── Stepper.js ├── doc │ └── Stepper.mdx └── index.js ├── SubNav ├── SubNav-styled.js ├── SubNav.js ├── SubNavActions.js ├── SubNavLink.js ├── SubNavList.js ├── SubNavTitle.js ├── doc │ └── SubNav.mdx └── index.js ├── Switch ├── Switch-styled.js ├── Switch.js ├── doc │ └── Switch.mdx └── index.js ├── Table ├── Table-styled.js ├── Table.js ├── TableBody.js ├── TableCell.js ├── TableHeader.js ├── TableHeaderCell.js ├── TableHeaderRow.js ├── TableRow.js ├── doc │ └── Table.mdx └── index.js ├── Tabs ├── Tab-styled.js ├── TabContents.js ├── TabNav.js ├── TabSection.js ├── TabTitle.js ├── Tabs.js ├── doc │ └── Tabs.mdx └── index.js ├── TextField ├── TextField-styled.js ├── TextField.js ├── doc │ ├── TextField-propsTable.js │ └── TextField.mdx └── index.js ├── Toaster ├── ToastContainer.js ├── Toaster-styled.js ├── Toaster.js ├── doc │ ├── Toaster.mdx │ └── ToasterExampleComponent.js └── index.js ├── Tooltip ├── Tooltip-styled.js ├── Tooltip.js ├── TooltipPopper.js ├── doc │ └── Tooltip.mdx └── index.js ├── TopNav ├── TopNav-styled.js ├── TopNav.js ├── TopNavActionsList.js ├── TopNavBrand.js ├── TopNavLink.js ├── TopNavList.js ├── TopNavTitle.js ├── doc │ └── TopNav.mdx └── index.js └── utils ├── color.js ├── commonElements.js ├── helpers.js └── type.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/react"], 3 | "plugins": [ 4 | ["babel-plugin-styled-components", { "fileName": false }], 5 | "@babel/plugin-proposal-class-properties", 6 | "@babel/plugin-proposal-export-default-from" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "react-app", 4 | "prettier", 5 | "prettier/react", 6 | "plugin:jsx-a11y/recommended" 7 | ], 8 | 9 | "plugins": ["jsx-a11y", "prettier"], 10 | 11 | "rules": { 12 | "prettier/prettier": "error" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Generated folders 2 | node_modules 3 | dist 4 | .docz 5 | 6 | # Editor 7 | .DS_Store 8 | 9 | # Jest folders 10 | coverage 11 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ## Expected Behavior 3 | 4 | 5 | ## Current Behavior 6 | 7 | 8 | ## Possible Solution 9 | 10 | 11 | ## Steps to Reproduce (for bugs) 12 | 13 | 14 | 1. 15 | 2. 16 | 3. 17 | 4. 18 | ## Context + Screenshots 19 | 20 | 21 | ## Your Environment 22 | 23 | * Version used: 24 | * Browser Name and version: 25 | * Operating System and version (desktop or mobile): 26 | * Link to your project: 27 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Related Issue 7 | 8 | 9 | 10 | 11 | 12 | ## Motivation and Context 13 | 14 | 15 | ## How Has This Been Tested? 16 | 17 | 18 | 19 | 20 | ## Screenshots (if appropriate): 21 | 22 | ## Types of changes 23 | 24 | - [ ] Bug fix (non-breaking change which fixes an issue) 25 | - [ ] New feature (non-breaking change which adds functionality) 26 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 27 | 28 | ## Checklist: 29 | 30 | 31 | - [ ] My code follows the code style of this project. 32 | - [ ] My change requires a change to the documentation. 33 | - [ ] I have updated the documentation accordingly. 34 | - [ ] I have read the **CONTRIBUTING** document. 35 | -------------------------------------------------------------------------------- /docz/Calcite_Icons.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Calcite Icons 3 | route: /icons 4 | --- 5 | 6 | import { Playground } from 'docz'; 7 | 8 | import IconDemo from './IconDemo'; 9 | 10 | import LayerBasemapIcon from 'calcite-ui-icons-react/LayerBasemapIcon'; 11 | import MagnifyingGlassIcon from 'calcite-ui-icons-react/MagnifyingGlassIcon'; 12 | import GlobeIcon from 'calcite-ui-icons-react/GlobeIcon'; 13 | 14 | # Calcite Icons 15 | 16 | ## Icons as React Components 17 | 18 | Calcite includes an iconset known as [Calcite UI Icons](https://esri.github.io/calcite-ui-icons). 19 | To make these icons easier to use in React, we use a library ([calcite-ui-icons-react](https://www.npmjs.com/package/calcite-ui-icons-react)) 20 | that creates React components from the SVG icons. 21 | 22 | ## Installation 23 | 24 | To use these icons, you must install the `calcite-ui-icons-react` package: 25 | 26 | ```shell 27 | npm i calcite-ui-icons-react 28 | ``` 29 | 30 | ## Basic Usage 31 | 32 | ### Importing Icons 33 | 34 | The name of the React component you will import is simply the icon name in PascalCase suffixed with `Icon`. 35 | 36 | ```jsx 37 | /* layer-basemap becomes LayerBasemapIcon */ 38 | import LayerBasemapIcon from 'calcite-ui-icons-react/LayerBasemapIcon'; 39 | 40 | ; 41 | ``` 42 | 43 | ### Size 44 | 45 | The icons take an optional `size` prop to adjust the rendered size of the icon. 46 | Calcite UI Icons has three unique SVGs for varying sizes for every icon, and we 47 | automatically select an icon for you based on the size you specify. 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | ### Color 57 | 58 | All icons accept a color prop, which will be applied to the fill attribute on 59 | the `svg` element. This means any valid CSS color value can be used 60 | (e.g. "red", "#e34f2c", "rgba(255, 0, 0, 0.5)"). If a color prop is not found, 61 | we will set it to "currentColor". 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ### Gotchas 70 | 71 | Since JavaScript variables cannot start with a number, we convert any icon name 72 | that begins with a number so that the word (or words, in PascalCase) are used 73 | instead. 74 | 75 | Currently, there are only two such cases: 76 | 77 | | Calcite UI Icons name | React Component Name | 78 | | --------------------- | -------------------- | 79 | | `2d-explore` | `TwoDExplore` | 80 | | `3d-glasses` | `ThreeDGlasses` | 81 | 82 | ## Playground 83 | 84 | 85 | -------------------------------------------------------------------------------- /docz/Getting_Started.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Getting Started 3 | route: / 4 | --- 5 | 6 | # Getting Started 7 | 8 | ### This project is deprecated and is not recommended for future development. 9 | 10 | We recommend you check out Esri's [Calcite Design System](https://www.esri.com/arcgis-blog/products/developers/announcements/make-beautiful-consistent-web-apps-faster/), which provides a [react output target](https://www.npmjs.com/package/@esri/calcite-components-react) for the [web component library](https://github.com/Esri/calcite-components#calcite-components)! 11 | 12 | ## Intro 13 | 14 | Calcite React is a component library built in React and used by Esri. It is an 15 | implementation of Calcite, the geo-centric design language of Esri, aimed at 16 | helping React developers to quickly build components that adhere to the Calcite 17 | design language. 18 | 19 | ## Installation 20 | 21 | ```shell 22 | npm i calcite-react 23 | ``` 24 | 25 | ## Usage 26 | 27 | ### Theme Provider 28 | 29 | Calcite React components rely on `` to access our theme 30 | via [React Context](https://reactjs.org/docs/context.html). All Calcite React 31 | components must be wrapped in this provider component in order to render 32 | properly. In most cases, it's recommended to wrap your entire app at the highest 33 | level. 34 | 35 | ```jsx 36 | import React from 'react'; 37 | import ReactDOM from 'react-dom'; 38 | 39 | import CalciteThemeProvider from 'calcite-react/CalciteThemeProvider'; 40 | 41 | import App from 'path/to/App'; 42 | 43 | ReactDOM.render( 44 | 45 | 46 | , 47 | document.getElementById('root') 48 | ); 49 | ``` 50 | 51 | ### Components 52 | 53 | Below is a simple example of importing and using two Calcite React components. 54 | 55 | ```jsx 56 | import React, { Component } from 'react'; 57 | 58 | import Button from 'calcite-react/Button'; 59 | import { CalciteH1 } from 'calcite-react/Elements'; 60 | 61 | class App extends Component { 62 | render() { 63 | return ( 64 |
65 | My App uses Calcite headers and buttons! 66 | 67 |
68 | ); 69 | } 70 | } 71 | 72 | export default App; 73 | ``` 74 | 75 | ## RTL 76 | Right-to-left (RTL) is supported by Calcite React components with the `dir="rtl"` 77 | attribute. The attribute must be applied to the `html` element to be inherited 78 | properly by the library. This will mirror all components including changing the 79 | `placement` used by `Tooltip`, `Popover`, and `Drawer`. 80 | ```jsx 81 | 82 | ``` 83 | -------------------------------------------------------------------------------- /docz/GuideExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { CalciteTheme as theme } from '../src/CalciteThemeProvider'; 4 | 5 | const GuideExampleContainer = styled.div` 6 | padding: 1rem; 7 | border-bottom: 1px solid #efefef; 8 | border-left: 1px solid #efefef; 9 | border-right: 1px solid #efefef; 10 | position: relative; 11 | clear: both; 12 | 13 | &:first-child { 14 | border-top: 1px solid #efefef; 15 | border-top-left-radius: 6px; 16 | border-top-right-radius: 6px; 17 | } 18 | 19 | &:last-child { 20 | border-bottom-right-radius: 6px; 21 | border-bottom-left-radius: 6px; 22 | } 23 | `; 24 | GuideExampleContainer.defaultProps = { theme }; 25 | 26 | const GuideExampleLabel = styled.code` 27 | color: ${props => props.theme.palette.darkestGray}; 28 | background: ${props => props.theme.palette.lightestGray}; 29 | font-size: 0.85rem; 30 | line-height: 1.4rem; 31 | white-space: pre; 32 | border-radius: 0 0 0 3px; 33 | position: absolute; 34 | top: -1px; 35 | right: -1px; 36 | padding: 2px 8px; 37 | z-index: 101; 38 | opacity: 0.75; 39 | 40 | *:first-child & { 41 | border-radius: 0 3px 0 3px; 42 | } 43 | `; 44 | GuideExampleLabel.defaultProps = { theme }; 45 | 46 | const GuideExample = ({ children, label, style, ...other }) => { 47 | function _getLabel() { 48 | if (label) { 49 | return {label}; 50 | } 51 | return null; 52 | } 53 | 54 | return ( 55 | 56 | {children} 57 | {_getLabel()} 58 | 59 | ); 60 | }; 61 | 62 | export default GuideExample; 63 | -------------------------------------------------------------------------------- /docz/IconDemo.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from 'react'; 2 | 3 | import TextField from '../src/TextField'; 4 | import Switch from '../src/Switch'; 5 | import Slider from '../src/Slider'; 6 | import Form, { FormControl, FormControlLabel } from '../src/Form'; 7 | 8 | import BananaIcon from 'calcite-ui-icons-react/BananaIcon'; 9 | import BasemapIcon from 'calcite-ui-icons-react/BasemapIcon'; 10 | import RunningIcon from 'calcite-ui-icons-react/RunningIcon'; 11 | import BatteryChargingIcon from 'calcite-ui-icons-react/BatteryChargingIcon'; 12 | import ThreeDGlassesIcon from 'calcite-ui-icons-react/ThreeDGlassesIcon'; 13 | 14 | export default class IconDemo extends Component { 15 | state = { 16 | size: 200, 17 | color: 'tomato' 18 | }; 19 | 20 | render() { 21 | return ( 22 | 23 |
24 | 25 | Color: 26 | this.setState({ color: e.target.value || '' })} 31 | /> 32 | 33 | 34 | 35 | Size: 36 | 41 | this.setState({ size: e.target.value || undefined }) 42 | } 43 | /> 44 | 49 | this.setState({ size: e.target.value || undefined }) 50 | } 51 | /> 52 | 53 |
54 |
55 | 59 | 63 | 67 | 71 | 75 |
76 | 77 | ); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /docz/ThemeWrapper.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CalciteThemeProvider from '../src/CalciteThemeProvider'; 3 | 4 | const ThemeWrapper = ({ children }) => ( 5 | {children} 6 | ); 7 | 8 | export default ThemeWrapper; 9 | -------------------------------------------------------------------------------- /docz/_sampleJson/states.json: -------------------------------------------------------------------------------- 1 | { 2 | "states": [ 3 | "Alabama", 4 | "Alaska", 5 | "American Samoa", 6 | "Arizona", 7 | "Arkansas", 8 | "California", 9 | "Colorado", 10 | "Connecticut", 11 | "Delaware", 12 | "District of Columbia", 13 | "Federated States of Micronesia", 14 | "Florida", 15 | "Georgia", 16 | "Guam", 17 | "Hawaii", 18 | "Idaho", 19 | "Illinois", 20 | "Indiana", 21 | "Iowa", 22 | "Kansas", 23 | "Kentucky", 24 | "Louisiana", 25 | "Maine", 26 | "Marshall Islands", 27 | "Maryland", 28 | "Massachusetts", 29 | "Michigan", 30 | "Minnesota", 31 | "Mississippi", 32 | "Missouri", 33 | "Montana", 34 | "Nebraska", 35 | "Nevada", 36 | "New Hampshire", 37 | "New Jersey", 38 | "New Mexico", 39 | "New York", 40 | "North Carolina", 41 | "North Dakota", 42 | "Northern Mariana Islands", 43 | "Ohio", 44 | "Oklahoma", 45 | "Oregon", 46 | "Palau", 47 | "Pennsylvania", 48 | "Puerto Rico", 49 | "Rhode Island", 50 | "South Carolina", 51 | "South Dakota", 52 | "Tennessee", 53 | "Texas", 54 | "Utah", 55 | "Vermont", 56 | "Virgin Island", 57 | "Virginia", 58 | "Washington", 59 | "West Virginia", 60 | "Wisconsin", 61 | "Wyoming" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /docz/images/bridge-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/images/bridge-circle.png -------------------------------------------------------------------------------- /docz/images/bridge3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/images/bridge3.jpg -------------------------------------------------------------------------------- /docz/images/city_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/images/city_map.png -------------------------------------------------------------------------------- /docz/images/codyProfile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/images/codyProfile.jpeg -------------------------------------------------------------------------------- /docz/images/subNav-greenBlue-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/images/subNav-greenBlue-bg.png -------------------------------------------------------------------------------- /docz/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/docz/public/favicon.png -------------------------------------------------------------------------------- /doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css'; 2 | import DoczCalcitetheme from './docz/DoczCalciteTheme'; 3 | import doczPluginNetlify from 'docz-plugin-netlify'; 4 | 5 | export default { 6 | plugins: [ 7 | // Enable CSS in mdx files (necessary for Toastify external CSS) 8 | css(), 9 | // Enable Netlify plugin to properly resolve routes 10 | doczPluginNetlify() 11 | ], 12 | 13 | htmlContext: { 14 | favicon: 'public/favicon.png' 15 | }, 16 | 17 | // Public folder where static assets can be referenced 18 | public: '/docz/public', 19 | 20 | // Wrapper component for each mdx file, used to wrap everything in CalciteThemeProvider 21 | wrapper: '../../docz/ThemeWrapper', 22 | 23 | // Ordering of the side menu, used here to put "Getting Started" first 24 | menu: ['Getting Started', 'Customization & Theme', 'Calcite Icons'], 25 | 26 | // Custom theme configuration 27 | themeConfig: DoczCalcitetheme, 28 | 29 | // Disable support for CodeSandbox for now, all our components just throw this 30 | // error in the build: 31 | // `Could not create Open in CodeSandbox { key: 'tooManyModules' }` 32 | codeSandbox: false 33 | }; 34 | -------------------------------------------------------------------------------- /src/Accordion/Accordion.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { StyledAccordion } from './Accordion-styled'; 15 | 16 | import { getChildType } from '../utils/helpers'; 17 | 18 | const Accordion = ({ 19 | children, 20 | activeSectionIndexes, 21 | onAccordionChange, 22 | iconPosition, 23 | ...other 24 | }) => { 25 | const childArray = React.Children.toArray(children); 26 | const childrenWithProps = childArray.map((child, i) => { 27 | switch (getChildType(child)) { 28 | case 'AccordionSection': 29 | let section; 30 | section = React.cloneElement(child, { 31 | key: i, 32 | active: activeSectionIndexes.includes(i), 33 | sectionIndex: i, 34 | onAccordionChange, 35 | iconPosition 36 | }); 37 | return section; 38 | default: 39 | return child; 40 | } 41 | }); 42 | 43 | return {childrenWithProps}; 44 | }; 45 | 46 | Accordion.propTypes = { 47 | /** Used to render AccordionSections inside the Accordion. */ 48 | children: PropTypes.node, 49 | /** Indexes of the sections that are supposed to be active. */ 50 | activeSectionIndexes: PropTypes.array, 51 | /** Where the chevron is positioned in relation to the title */ 52 | iconPosition: PropTypes.oneOf(['start', 'end']) 53 | }; 54 | 55 | Accordion.defaultProps = { 56 | activeSectionIndexes: [], 57 | onAccordionChange: () => {}, 58 | iconPosition: 'end' 59 | }; 60 | 61 | Accordion.displayName = 'Accordion'; 62 | 63 | export default Accordion; 64 | -------------------------------------------------------------------------------- /src/Accordion/AccordionContent.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React from 'react'; 13 | import PropTypes from 'prop-types'; 14 | import { StyledAccordionContent } from './Accordion-styled'; 15 | 16 | const AccordionContent = ({ children, ...other }) => { 17 | return {children}; 18 | }; 19 | 20 | AccordionContent.propTypes = { 21 | /** The content of the component; can be a node or string. */ 22 | children: PropTypes.node 23 | }; 24 | 25 | AccordionContent.defaultProps = {}; 26 | 27 | AccordionContent.displayName = 'AccordionContent'; 28 | 29 | export default AccordionContent; 30 | -------------------------------------------------------------------------------- /src/Accordion/AccordionSection.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React from 'react'; 13 | import PropTypes from 'prop-types'; 14 | import { StyledAccordionSection } from './Accordion-styled'; 15 | 16 | import { getChildType } from '../utils/helpers'; 17 | 18 | const AccordionSection = ({ 19 | children, 20 | active, 21 | sectionIndex, 22 | onAccordionChange, 23 | iconPosition, 24 | ...other 25 | }) => { 26 | const childArray = React.Children.toArray(children); 27 | const childrenWithProps = childArray.map((child, i) => { 28 | switch (getChildType(child)) { 29 | case 'AccordionTitle': 30 | let title; 31 | title = React.cloneElement(child, { 32 | key: i, 33 | active, 34 | sectionIndex, 35 | onAccordionChange, 36 | iconPosition 37 | }); 38 | return title; 39 | case 'AccordionContent': 40 | let content; 41 | content = React.cloneElement(child, { 42 | key: i, 43 | active, 44 | sectionIndex 45 | }); 46 | return content; 47 | default: 48 | return child; 49 | } 50 | }); 51 | 52 | return ( 53 | 54 | {childrenWithProps} 55 | 56 | ); 57 | }; 58 | 59 | AccordionSection.propTypes = { 60 | /** The content of the component; should be AccordionTitle and AccordionContent. */ 61 | children: PropTypes.node 62 | }; 63 | 64 | AccordionSection.defaultProps = { 65 | onAccordionChange: () => {} 66 | }; 67 | 68 | AccordionSection.displayName = 'AccordionSection'; 69 | 70 | export default AccordionSection; 71 | -------------------------------------------------------------------------------- /src/Accordion/AccordionTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { StyledAccordionTitle, StyledChevronIcon } from './Accordion-styled'; 15 | 16 | const AccordionTitle = ({ 17 | children, 18 | active, 19 | sectionIndex, 20 | onAccordionChange, 21 | iconPosition, 22 | ...other 23 | }) => { 24 | const setActiveAccordionIndex = e => { 25 | onAccordionChange(e, sectionIndex); 26 | }; 27 | 28 | return ( 29 | 35 | {iconPosition === 'start' ? ( 36 | 41 | ) : null} 42 | {children} 43 | {iconPosition === 'end' ? ( 44 | 49 | ) : null} 50 | 51 | ); 52 | }; 53 | 54 | AccordionTitle.propTypes = { 55 | /** The content of the component */ 56 | children: PropTypes.node 57 | }; 58 | 59 | AccordionTitle.defaultProps = { 60 | onAccordionChange: () => {} 61 | }; 62 | 63 | AccordionTitle.displayName = 'AccordionTitle'; 64 | 65 | export default AccordionTitle; 66 | -------------------------------------------------------------------------------- /src/Accordion/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Accordion'; 13 | export { default as AccordionSection } from './AccordionSection'; 14 | export { default as AccordionContent } from './AccordionContent'; 15 | export { default as AccordionTitle } from './AccordionTitle'; 16 | -------------------------------------------------------------------------------- /src/AccountTile/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './AccountTile'; 13 | -------------------------------------------------------------------------------- /src/ActionBar/Action.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledAction, TooltipWrapperStyles } from './ActionBar-styled'; 16 | 17 | import Tooltip from '../Tooltip'; 18 | 19 | import { ActionBarContext } from './ActionBar'; 20 | 21 | const Action = ({ children, icon, ...other }) => { 22 | const actionBarContext = useContext(ActionBarContext); 23 | 24 | const getIcon = icon => { 25 | return React.cloneElement(icon, { 26 | size: 16 27 | }); 28 | }; 29 | 30 | const actionButton = ( 31 | 38 | {!actionBarContext.collapsed && children} 39 | 40 | ); 41 | 42 | return actionBarContext.collapsed ? ( 43 | 48 | {actionButton} 49 | 50 | ) : ( 51 | actionButton 52 | ); 53 | }; 54 | 55 | Action.propTypes = { 56 | /** The content of the component */ 57 | children: PropTypes.node, 58 | /** Sets the action as the selected item in the ActionBar */ 59 | active: PropTypes.bool 60 | }; 61 | 62 | Action.defaultProps = {}; 63 | 64 | Action.displayName = 'Action'; 65 | 66 | export default Action; 67 | -------------------------------------------------------------------------------- /src/ActionBar/ActionGroup.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | 7 | // Component specific modules (Component-styled, etc.) 8 | import { StyledActionGroup } from './ActionBar-styled'; 9 | 10 | // App components 11 | 12 | // Third-party components (buttons, icons, etc.) 13 | 14 | // JSON 15 | 16 | // CSS 17 | 18 | const ActionGroup = ({ children, ...other }) => { 19 | return {children}; 20 | }; 21 | 22 | ActionGroup.propTypes = { 23 | /** The content of the component */ 24 | children: PropTypes.node 25 | }; 26 | 27 | ActionGroup.defaultProps = {}; 28 | 29 | export default ActionGroup; 30 | -------------------------------------------------------------------------------- /src/ActionBar/BottomActionGroup.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | 7 | // Component specific modules (Component-styled, etc.) 8 | import { StyledBottomActionGroup } from './ActionBar-styled'; 9 | 10 | // App components 11 | 12 | // Third-party components (buttons, icons, etc.) 13 | 14 | // JSON 15 | 16 | // CSS 17 | 18 | const ActionGroup = ({ children, ...other }) => { 19 | return ( 20 | {children} 21 | ); 22 | }; 23 | 24 | ActionGroup.propTypes = { 25 | /** The content of the component */ 26 | children: PropTypes.node 27 | }; 28 | 29 | ActionGroup.defaultProps = {}; 30 | 31 | export default ActionGroup; 32 | -------------------------------------------------------------------------------- /src/ActionBar/CollapseAction.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledCollapseAction, TooltipWrapperStyles } from './ActionBar-styled'; 16 | 17 | import Tooltip from '../Tooltip'; 18 | 19 | import ChevronsRight from 'calcite-ui-icons-react/ChevronsRightIcon'; 20 | import ChevronsLeft from 'calcite-ui-icons-react/ChevronsLeftIcon'; 21 | 22 | const CollapseAction = ({ 23 | children, 24 | collapsed, 25 | expandLabel, 26 | collapseLabel, 27 | dark, 28 | position, 29 | ...other 30 | }) => { 31 | const getAction = action => { 32 | if (!collapsed) { 33 | return action; 34 | } 35 | 36 | return ( 37 | 42 | {action} 43 | 44 | ); 45 | }; 46 | 47 | return getAction( 48 | : 51 | } 52 | dark={dark} 53 | position={position} 54 | {...other} 55 | > 56 | {!collapsed && collapseLabel} 57 | 58 | ); 59 | }; 60 | 61 | CollapseAction.propTypes = { 62 | /** The content of the component; should be TabNav and TabContents. */ 63 | children: PropTypes.node 64 | }; 65 | 66 | CollapseAction.defaultProps = {}; 67 | 68 | CollapseAction.displayName = 'CollapseAction'; 69 | 70 | export default CollapseAction; 71 | -------------------------------------------------------------------------------- /src/ActionBar/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './ActionBar'; 13 | export { default as Action } from './Action'; 14 | export { default as ActionGroup } from './ActionGroup'; 15 | export { default as BottomActionGroup } from './BottomActionGroup'; 16 | -------------------------------------------------------------------------------- /src/Alert/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Alert'; 13 | export { 14 | StyledAlertTitle as AlertTitle, 15 | StyledAlertMessage as AlertMessage 16 | } from './Alert-styled'; 17 | -------------------------------------------------------------------------------- /src/ArcgisAccount/ArcgisAccountContentInfo.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // Framework and third-party non-ui 13 | import React from 'react'; 14 | import PropTypes from 'prop-types'; 15 | 16 | // Redux operations and local helpers/utils/modules 17 | 18 | // Component specific modules (Component-styled, etc.) 19 | import { 20 | StyledArcgisAccountContentInfo, 21 | StyledArcgisAccountContentName, 22 | StyledArcgisAccountContentId, 23 | StyledArcgisAccountContentGroup 24 | } from './ArcgisAccount-styled'; 25 | 26 | // App components 27 | import { CalciteTheme } from '../CalciteThemeProvider'; 28 | 29 | // Third-party components (buttons, icons, etc.) 30 | 31 | // JSON 32 | 33 | // CSS 34 | 35 | const ArcgisAccountContentInfo = ({ user, portal, avatar, ...other }) => { 36 | const _avatar = React.cloneElement(avatar, { 37 | style: { 38 | border: `2px solid ${CalciteTheme.palette.white}`, 39 | boxShadow: `0 0 0 3px ${CalciteTheme.palette.blue}`, 40 | marginBottom: CalciteTheme.baseline 41 | } 42 | }); 43 | 44 | return ( 45 | 46 | {_avatar} 47 | 48 | {user.fullName} 49 | 50 | 51 | {user.username} 52 | 53 | 54 | {portal.name} 55 | 56 | 57 | ); 58 | }; 59 | 60 | ArcgisAccountContentInfo.propTypes = { 61 | /** AGOL user object */ 62 | user: PropTypes.object 63 | }; 64 | 65 | ArcgisAccountContentInfo.defaultProps = {}; 66 | 67 | ArcgisAccountContentInfo.displayName = 'ArcgisAccountContentInfo'; 68 | 69 | export default ArcgisAccountContentInfo; 70 | -------------------------------------------------------------------------------- /src/ArcgisAccount/ArcgisAccountContentMenu.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // Framework and third-party non-ui 13 | import React from 'react'; 14 | import PropTypes from 'prop-types'; 15 | 16 | // Redux operations and local helpers/utils/modules 17 | 18 | // Component specific modules (Component-styled, etc.) 19 | import { StyledArcgisAccountContentMenu } from './ArcgisAccount-styled'; 20 | 21 | // App components 22 | 23 | // Third-party components (buttons, icons, etc.) 24 | 25 | // JSON 26 | 27 | // CSS 28 | 29 | const ArcgisAccountContentMenu = ({ children, user, ...other }) => { 30 | return ( 31 | 32 | {children} 33 | 34 | ); 35 | }; 36 | 37 | ArcgisAccountContentMenu.propTypes = { 38 | /** Content of the StyledArcgisAccountContentMenu */ 39 | children: PropTypes.node, 40 | /** AGOL user object */ 41 | user: PropTypes.object 42 | }; 43 | 44 | ArcgisAccountContentMenu.defaultProps = {}; 45 | 46 | ArcgisAccountContentMenu.displayName = 'ArcgisAccountContentMenu'; 47 | 48 | export default ArcgisAccountContentMenu; 49 | -------------------------------------------------------------------------------- /src/ArcgisAccount/ArcgisAccountControl.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // Framework and third-party non-ui 13 | import React from 'react'; 14 | import PropTypes from 'prop-types'; 15 | 16 | // Redux operations and local helpers/utils/modules 17 | 18 | // Component specific modules (Component-styled, etc.) 19 | import { 20 | StyledArcgisAccountControl, 21 | StyledArcgisAccountControlAvatar, 22 | StyledArcgisAccountControlNames, 23 | StyledArcgisAccountControlFriendlyName, 24 | StyledArcgisAccountControlUsername 25 | } from './ArcgisAccount-styled'; 26 | 27 | // App components 28 | 29 | // Third-party components (buttons, icons, etc.) 30 | 31 | // JSON 32 | 33 | // CSS 34 | 35 | const ArcgisAccountControl = ({ 36 | avatar, 37 | fullName, 38 | username, 39 | open, 40 | ...other 41 | }) => { 42 | return ( 43 | 44 | 45 | {avatar} 46 | 47 | 48 | 49 | {fullName} 50 | 51 | 52 | {username} 53 | 54 | 55 | 56 | ); 57 | }; 58 | 59 | ArcgisAccountControl.propTypes = { 60 | /** User profile avatar image. */ 61 | avatar: PropTypes.node, 62 | /** User's full name. */ 63 | fullName: PropTypes.string, 64 | /** User's AGOL username. */ 65 | username: PropTypes.string, 66 | /** Boolean toggle for popover visibility. */ 67 | open: PropTypes.bool 68 | }; 69 | 70 | ArcgisAccountControl.defaultProps = {}; 71 | 72 | ArcgisAccountControl.displayName = 'ArcgisAccountControl'; 73 | 74 | export default ArcgisAccountControl; 75 | -------------------------------------------------------------------------------- /src/ArcgisAccount/ArcgisAccountMenuItem.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // Framework and third-party non-ui 13 | import React from 'react'; 14 | import PropTypes from 'prop-types'; 15 | 16 | // Redux operations and local helpers/utils/modules 17 | 18 | // Component specific modules (Component-styled, etc.) 19 | import { StyledArcgisAccountMenuItem } from './ArcgisAccount-styled'; 20 | 21 | // App components 22 | 23 | // Third-party components (buttons, icons, etc.) 24 | 25 | // JSON 26 | 27 | // CSS 28 | 29 | const ArcgisAccountMenuItem = ({ children, ...other }) => { 30 | return ( 31 | 32 | {children} 33 | 34 | ); 35 | }; 36 | 37 | ArcgisAccountMenuItem.propTypes = { 38 | /** Content node of the ArcgisAccountMenuItem. */ 39 | children: PropTypes.node 40 | }; 41 | 42 | ArcgisAccountMenuItem.defaultProps = {}; 43 | 44 | ArcgisAccountMenuItem.displayName = 'ArcgisAccountMenuItem'; 45 | 46 | export default ArcgisAccountMenuItem; 47 | -------------------------------------------------------------------------------- /src/ArcgisAccount/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './ArcgisAccount'; 13 | export { default as ArcgisAccountMenuItem } from './ArcgisAccountMenuItem'; 14 | export { default as useAccountManager } from './useAccountManager'; 15 | -------------------------------------------------------------------------------- /src/ArcgisItemCard/doc/ArcgisItemCard.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: ArcgisItemCard 3 | route: /arcgis-item-card 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | 8 | import ArcgisItemCard from '../'; 9 | import { StyledUserIcon, StyledCalendarIcon } from '../ArcgisItemCard-styled'; 10 | 11 | import item from './item.json'; 12 | 13 | # ArcgisItemCard 14 | 15 | A card for ArcGIS items to be displayed as a single UI element. 16 | 17 | #### Import Syntax 18 | 19 | ```js 20 | import ArcgisItemCard from 'calcite-react/ArcgisItemCard' 21 | ``` 22 | 23 | ## Basic Usage 24 | 25 | 26 | 27 | 28 | 29 | ## Vertical Usage 30 | 31 | 32 | 33 | 34 | 35 | ## Basic Usage With Actions 36 | 37 | 38 | , ]}/> 39 | 40 | 41 | ## Vertical Usage With Actions 42 | 43 | 44 | , ]}/> 45 | 46 | 47 | ## Props 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/ArcgisItemCard/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './ArcgisItemCard'; 13 | -------------------------------------------------------------------------------- /src/ArcgisShare/doc/ArcgisShare.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: ArcgisShare 3 | route: /arcgis-share 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | 8 | import ArcgisShare from '../'; 9 | 10 | import user from './user.json'; 11 | import portal from './portal.json'; 12 | import item from './item.json'; 13 | import itemNoGroups from './user-noGroups.json'; 14 | 15 | # ArcgisShare 16 | 17 | A checkbox tree to select which groups you want to share an item with in ArcGIS. 18 | 19 | #### Import Syntax 20 | 21 | ```js 22 | import ArcgisShare from 'calcite-react/ArcgisShare' 23 | ``` 24 | 25 | ## Basic Usage 26 | 27 | 28 | console.log(e)} /> 29 | 30 | 31 | ## Populated with an ArcGIS Item 32 | 33 | 34 | console.log(e)} 39 | /> 40 | 41 | 42 | ## Promote Favorites 43 | 44 | 45 | console.log(e)} 50 | /> 51 | 52 | 53 | ## No Groups 54 | 55 | 56 | console.log(e)} 61 | /> 62 | 63 | 64 | ## Hide Public Sharing 65 | 66 | 67 | console.log(e)} 72 | /> 73 | 74 | 75 | ## Props 76 | 77 | 78 | -------------------------------------------------------------------------------- /src/ArcgisShare/doc/item.json: -------------------------------------------------------------------------------- 1 | { 2 | "item": { 3 | "id": "258c79a68c164553b87f0ee5bed33295", 4 | "owner": "jpeterson_iot", 5 | "created": 1522266045000, 6 | "modified": 1522266046000, 7 | "guid": null, 8 | "name": null, 9 | "title": "ArcGIS for IoT", 10 | "type": "Web Mapping Application", 11 | "typeKeywords": [ 12 | "JavaScript", 13 | "Map", 14 | "Mapping Site", 15 | "Online Map", 16 | "Ready To Use", 17 | "Web Map", 18 | "Registered App" 19 | ], 20 | "description": null, 21 | "tags": ["a4iot"], 22 | "snippet": null, 23 | "thumbnail": "thumbnail/ago_downloaded.png", 24 | "documentation": null, 25 | "extent": [], 26 | "categories": [], 27 | "spatialReference": null, 28 | "accessInformation": null, 29 | "licenseInfo": null, 30 | "culture": "en-us", 31 | "properties": null, 32 | "url": "https://iot.arcgis.com", 33 | "proxyFilter": null, 34 | "access": "org", 35 | "size": 0, 36 | "appCategories": [], 37 | "industries": [], 38 | "languages": [], 39 | "largeThumbnail": null, 40 | "banner": null, 41 | "screenshots": [], 42 | "listed": false, 43 | "ownerFolder": null, 44 | "protected": false, 45 | "numComments": 0, 46 | "numRatings": 0, 47 | "avgRating": 0, 48 | "numViews": 3, 49 | "itemControl": "admin", 50 | "scoreCompleteness": 33 51 | }, 52 | "sharing": { 53 | "access": "org", 54 | "groups": [ 55 | "f83a849864f24fae885010a1f073e32b", 56 | "59cc321052ca479ca00a8d20f8181c80" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/ArcgisShare/doc/user-noGroups.json: -------------------------------------------------------------------------------- 1 | { 2 | "username": "codylawson", 3 | "fullName": "Cody Lawson", 4 | "availableCredits": 15.08, 5 | "assignedCredits": 20, 6 | "firstName": "Cody", 7 | "lastName": "Lawson", 8 | "preferredView": null, 9 | "description": "", 10 | "email": "clawson@esri.com", 11 | "userType": "both", 12 | "idpUsername": null, 13 | "favGroupId": "4f7956f29e454b94a044b153bee4b411", 14 | "lastLogin": 1521235530000, 15 | "mfaEnabled": false, 16 | "access": "public", 17 | "storageUsage": 11454613937, 18 | "storageQuota": 2199023255552, 19 | "orgId": "wQnFk5ouCfPzTlPw", 20 | "role": "org_publisher", 21 | "privileges": [ 22 | "features:user:edit", 23 | "portal:publisher:publishFeatures", 24 | "portal:publisher:publishScenes", 25 | "portal:publisher:publishServerServices", 26 | "portal:publisher:publishTiles", 27 | "portal:user:categorizeItems", 28 | "portal:user:createGroup", 29 | "portal:user:createItem", 30 | "portal:user:joinGroup", 31 | "portal:user:joinNonOrgGroup", 32 | "portal:user:shareGroupToOrg", 33 | "portal:user:shareGroupToPublic", 34 | "portal:user:shareToGroup", 35 | "portal:user:shareToOrg", 36 | "portal:user:shareToPublic", 37 | "portal:user:viewOrgGroups", 38 | "portal:user:viewOrgItems", 39 | "portal:user:viewOrgUsers", 40 | "premium:publisher:geoanalytics", 41 | "premium:publisher:rasteranalysis", 42 | "premium:user:demographics", 43 | "premium:user:elevation", 44 | "premium:user:geocode", 45 | "premium:user:geoenrichment", 46 | "premium:user:networkanalysis", 47 | "premium:user:spatialanalysis" 48 | ], 49 | "level": "2", 50 | "disabled": false, 51 | "tags": ["undefined"], 52 | "culture": "en", 53 | "region": "US", 54 | "units": "english", 55 | "thumbnail": "profile.jpg", 56 | "created": 1340925716000, 57 | "modified": 1473967899000, 58 | "provider": "arcgis", 59 | "groups": [] 60 | } 61 | -------------------------------------------------------------------------------- /src/ArcgisShare/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './ArcgisShare'; 13 | -------------------------------------------------------------------------------- /src/Avatar/Avatar-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled, { css } from 'styled-components'; 14 | 15 | // Utils, common elements 16 | 17 | // Calcite theme and Esri colors 18 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 19 | 20 | // Calcite components 21 | 22 | // Icons 23 | 24 | // Third party libraries 25 | 26 | const StyledAvatar = styled.div` 27 | width: ${props => props.aSize}px; 28 | height: ${props => props.aSize}px; 29 | display: flex; 30 | position: relative; 31 | overflow: hidden; 32 | background-color: ${props => props.theme.palette.blue}; 33 | color: ${props => props.theme.palette.white}; 34 | font-size: 1.25rem; 35 | flex-shrink: 0; 36 | align-items: center; 37 | user-select: none; 38 | border-radius: 50%; 39 | justify-content: center; 40 | 41 | ${props => 42 | props.fontSize && 43 | css` 44 | font-size: ${props.fontSize}px; 45 | `}; 46 | `; 47 | StyledAvatar.defaultProps = { theme }; 48 | 49 | const StyledAvatarImage = styled.img` 50 | width: 100%; 51 | height: 100%; 52 | text-align: center; 53 | object-fit: cover; 54 | `; 55 | StyledAvatarImage.defaultProps = { theme }; 56 | 57 | const StyledAvatarSvg = { 58 | fill: 'currentColor', 59 | display: 'inline-block', 60 | fontSize: '24px', 61 | transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', 62 | userSelect: 'none', 63 | flexShrink: '0' 64 | }; 65 | 66 | const StyledAvatarText = styled.span` 67 | font-weight: 300; 68 | font-family: ${props => props.theme.type.avenirFamily}; 69 | `; 70 | StyledAvatarText.defaultProps = { theme }; 71 | 72 | export { StyledAvatar, StyledAvatarImage, StyledAvatarSvg, StyledAvatarText }; 73 | -------------------------------------------------------------------------------- /src/Avatar/Avatar.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { 15 | StyledAvatar, 16 | StyledAvatarImage, 17 | StyledAvatarSvg, 18 | StyledAvatarText 19 | } from './Avatar-styled'; 20 | 21 | const Avatar = ({ 22 | children, 23 | src, 24 | alt, 25 | size, 26 | fontSize, 27 | 28 | ...other 29 | }) => { 30 | const getWrappedChildren = children => { 31 | if (children) { 32 | if (React.isValidElement(children)) { 33 | //Assume the element is an SVG icon 34 | const _fontSize = fontSize ? { fontSize: fontSize } : null; 35 | return React.cloneElement(children, { 36 | ...children.props, 37 | style: { 38 | ...StyledAvatarSvg, 39 | ...children.props.style, 40 | ..._fontSize 41 | } 42 | }); 43 | } else { 44 | return {children}; 45 | } 46 | } else if (src) { 47 | return ; 48 | } 49 | }; 50 | 51 | return ( 52 | 53 | {getWrappedChildren(children)} 54 | 55 | ); 56 | }; 57 | 58 | Avatar.propTypes = { 59 | /** The content of the component; can take text, an image, or an icon. */ 60 | children: PropTypes.node, 61 | /** The src attribute for the img element. */ 62 | src: PropTypes.string, 63 | /** Used in combination with src to provide 64 | an alt attribute for the rendered img element. */ 65 | alt: PropTypes.string, 66 | /** Diameter of the Avatar. */ 67 | size: PropTypes.number 68 | }; 69 | 70 | Avatar.defaultProps = { 71 | size: 40 72 | }; 73 | 74 | Avatar.displayName = 'Avatar'; 75 | 76 | export default Avatar; 77 | -------------------------------------------------------------------------------- /src/Avatar/doc/Avatar.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Avatar 3 | route: /avatar 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | 9 | import Avatar from '../'; 10 | 11 | import { colors } from '@esri/calcite-colors'; 12 | import CodyProfilePic from './codyProfile.jpeg'; 13 | 14 | import DownloadToIcon from 'calcite-ui-icons-react/DownloadToIcon'; 15 | import SaveIcon from 'calcite-ui-icons-react/SaveIcon'; 16 | import UserIcon from 'calcite-ui-icons-react/UserIcon'; 17 | import SearchIcon from 'calcite-ui-icons-react/SearchIcon'; 18 | 19 | # Avatar 20 | 21 | Avatars can take an image or a short string in order to display a tidy, circular 22 | element that can be used in your UI. Avatars are commonly seen in user profiles. 23 | 24 | #### Import Syntax 25 | 26 | ```js 27 | import Avatar from 'calcite-react/Avatar'; 28 | ``` 29 | 30 | ## Basic Usage 31 | 32 | 33 | A 34 | 40 | CL 41 | 42 | 49 | JP 50 | 51 | 52 | 53 | ## With Image 54 | 55 | 56 | 57 | 61 | 62 | 63 | ## With Icon 64 | 65 | 66 | 67 | 68 | 69 | 75 | 76 | 77 | 84 | 85 | 86 | 92 | 93 | 94 | 95 | 96 | ## Props 97 | 98 | 99 | -------------------------------------------------------------------------------- /src/Avatar/doc/codyProfile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-react/ae9ac239c63242c860142e453ab2950e2b6009b6/src/Avatar/doc/codyProfile.jpeg -------------------------------------------------------------------------------- /src/Avatar/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Avatar'; 13 | -------------------------------------------------------------------------------- /src/Breadcrumbs/Breadcrumbs.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledBreadcrumbs } from './Breadcrumbs-styled'; 17 | 18 | const BreadcrumbsContext = createContext({ 19 | breadcrumbsContext: { 20 | white: undefined, 21 | dividerCharacter: undefined 22 | } 23 | }); 24 | BreadcrumbsContext.displayName = 'BreadcrumbsContext'; 25 | 26 | const Breadcrumbs = ({ children, white, dividerCharacter, ...other }) => { 27 | const breadcrumbsContext = useContextState({ 28 | white, 29 | dividerCharacter 30 | }); 31 | 32 | return ( 33 | 34 | {children} 35 | 36 | ); 37 | }; 38 | 39 | Breadcrumbs.propTypes = { 40 | /** Crumb components to be rendered within Breadcrumbs. */ 41 | children: PropTypes.node, 42 | /** Color modifier for the Breadcrumbs. */ 43 | white: PropTypes.bool, 44 | /** The character used as a divider between Crumbs */ 45 | dividerCharacter: PropTypes.node 46 | }; 47 | 48 | Breadcrumbs.defaultProps = { 49 | dividerCharacter: '/' 50 | }; 51 | 52 | Breadcrumbs.displayName = 'Breadcrumbs'; 53 | 54 | export { Breadcrumbs as default, BreadcrumbsContext }; 55 | -------------------------------------------------------------------------------- /src/Breadcrumbs/Crumb.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledCrumb, StyledSpanCrumb } from './Breadcrumbs-styled'; 16 | import { BreadcrumbsContext } from './Breadcrumbs'; 17 | 18 | const Crumb = ({ children, href, hasLink, ...other }) => { 19 | const breadcrumbsContext = useContext(BreadcrumbsContext); 20 | 21 | // Render a span if there's no href or link prop 22 | let Crumb = StyledSpanCrumb; 23 | if (href || hasLink) { 24 | Crumb = StyledCrumb; 25 | } 26 | 27 | return ( 28 | 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | Crumb.propTypes = { 35 | /** Text content of the Breadcrumb. */ 36 | children: PropTypes.node, 37 | /** Boolean to toggle the light style for Breadcrumbs. */ 38 | white: PropTypes.bool, 39 | /** href html prop */ 40 | href: PropTypes.string, 41 | /** The character used as a divider between Crumbs; by default it will inherit the parent Breadcrumbs dividerCharacter */ 42 | dividerCharacter: PropTypes.node, 43 | /** Use hasLink as a way to maintain the calcite link styles when no href is given (useful when using a Crumb with an outside routing library). */ 44 | hasLink: PropTypes.bool 45 | }; 46 | 47 | Crumb.defaultProps = {}; 48 | 49 | Crumb.displayName = 'Crumb'; 50 | 51 | export default Crumb; 52 | -------------------------------------------------------------------------------- /src/Breadcrumbs/doc/Breadcrumbs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Breadcrumbs 3 | route: /breadcrumbs 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | 8 | import GuideExample from '../../../docz/GuideExample'; 9 | import { CalciteTheme } from '../../../src/CalciteThemeProvider'; 10 | 11 | import Breadcrumbs, { Crumb } from '../'; 12 | 13 | # Breadcrumbs 14 | 15 | Breadcrumbs are a set of links or labels used for navigation and context. 16 | 17 | #### Import Syntax 18 | 19 | ```js 20 | import Breadcrumbs, { Crumb } from 'calcite-react/Breadcrumbs' 21 | ``` 22 | 23 | ## Basic Usage 24 | 25 | 26 | 27 | 28 | Thing 29 | Thing 30 | Thing 31 | Current 32 | 33 | 34 | 38 | 39 | Thing 40 | Thing 41 | Thing 42 | Current 43 | 44 | 45 | 46 | 47 | ## Custom Divider Character 48 | 49 | 50 | 51 | 52 | Thing 53 | Thing 54 | Thing 55 | Current 56 | 57 | 58 | 59 | 60 | 61 | ## Props 62 | 63 | ### Breadcrumbs `default` 64 | 65 | 66 | 67 | ### Crumb 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/Breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Breadcrumbs'; 13 | export { default as Crumb } from './Crumb'; 14 | -------------------------------------------------------------------------------- /src/Button/ButtonGroup.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledButtonGroup } from './Button-styled'; 17 | 18 | const ButtonGroupContext = createContext({ 19 | buttonGroupContext: { 20 | grouped: undefined, 21 | isToggle: undefined 22 | } 23 | }); 24 | ButtonGroupContext.displayName = 'ButtonGroupContext'; 25 | 26 | const ButtonGroup = ({ children, isToggle, ...other }) => { 27 | const buttonGroupContext = useContextState({ 28 | grouped: true, 29 | isToggle 30 | }); 31 | 32 | return ( 33 | 34 | 35 | {children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | ButtonGroup.propTypes = { 42 | /** The content of the component; should be a number of Buttons. */ 43 | children: PropTypes.node, 44 | /** Style prop used to help adjust margins and positioning of Buttons when one is active. */ 45 | isToggle: PropTypes.bool 46 | }; 47 | 48 | ButtonGroup.defaultProps = {}; 49 | 50 | ButtonGroup.displayName = 'ButtonGroup'; 51 | 52 | export { ButtonGroup as default, ButtonGroupContext }; 53 | -------------------------------------------------------------------------------- /src/Button/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Button'; 13 | export { default as ButtonGroup } from './ButtonGroup'; 14 | -------------------------------------------------------------------------------- /src/CalciteThemeProvider/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './CalciteThemeProvider'; 13 | export { default as CalciteTheme } from './CalciteTheme'; 14 | export { default as EsriColors } from './EsriColors'; 15 | -------------------------------------------------------------------------------- /src/Card/Card.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext, forwardRef } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledCard } from './Card-styled'; 17 | 18 | const CardContext = createContext({ 19 | cardContext: { 20 | shaped: undefined, 21 | wide: undefined 22 | } 23 | }); 24 | CardContext.displayName = 'CardContext'; 25 | 26 | const Card = forwardRef(({ children, shaped, wide, ...other }, ref) => { 27 | const cardContext = useContextState({ 28 | shaped, 29 | wide 30 | }); 31 | 32 | return ( 33 | 34 | 35 | {children} 36 | 37 | 38 | ); 39 | }); 40 | 41 | Card.propTypes = { 42 | /** The content of the component. */ 43 | children: PropTypes.node, 44 | /** Style prop to show a colored bar across the top of the Card; can take a string for any color name in EsriColors. */ 45 | bar: PropTypes.string, 46 | /** Style prop to add a shape mask to the CardImage. */ 47 | shaped: PropTypes.bool, 48 | /** Style prop to position Card content horizontally and fill the width of its container. */ 49 | wide: PropTypes.bool 50 | }; 51 | 52 | Card.defaultProps = {}; 53 | 54 | Card.displayName = 'Card'; 55 | 56 | export { Card as default, CardContext }; 57 | -------------------------------------------------------------------------------- /src/Card/CardContent.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | import { StyledCardContent } from './Card-styled'; 15 | 16 | import { CardContext } from './Card'; 17 | 18 | const CardContent = ({ children, ...other }) => { 19 | const cardContext = useContext(CardContext); 20 | 21 | return ( 22 | 23 | {children} 24 | 25 | ); 26 | }; 27 | 28 | CardContent.propTypes = { 29 | /** The content of the component. */ 30 | children: PropTypes.node 31 | }; 32 | 33 | CardContent.defaultProps = {}; 34 | 35 | CardContent.displayName = 'CardContent'; 36 | 37 | export default CardContent; 38 | -------------------------------------------------------------------------------- /src/Card/CardImage.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | import { 15 | StyledCardImageWrap, 16 | StyledCardImage, 17 | StyledCardImageCaption 18 | } from './Card-styled'; 19 | 20 | import { CardContext } from './Card'; 21 | 22 | const CardImage = ({ children, src, caption, alt, ...other }) => { 23 | const cardContext = useContext(CardContext); 24 | 25 | function getFigcaption(shaped) { 26 | if (!shaped && caption) { 27 | return {caption}; 28 | } 29 | } 30 | 31 | return ( 32 | 33 | 34 | {getFigcaption(cardContext.shaped)} 35 | 36 | ); 37 | }; 38 | 39 | CardImage.propTypes = { 40 | /** The HTML src property of the CardImage. */ 41 | src: PropTypes.string, 42 | /** The text content of the figure caption on the CardImage. */ 43 | caption: PropTypes.string, 44 | /** The HTML alt property of the component. */ 45 | alt: PropTypes.string 46 | }; 47 | 48 | CardImage.defaultProps = {}; 49 | 50 | CardImage.displayName = 'CardImage'; 51 | 52 | export default CardImage; 53 | -------------------------------------------------------------------------------- /src/Card/CardTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { StyledCardTitle } from './Card-styled'; 15 | 16 | const CardTitle = ({ children, ...other }) => { 17 | return {children}; 18 | }; 19 | 20 | CardTitle.propTypes = { 21 | /** The content of the component. */ 22 | children: PropTypes.node 23 | }; 24 | 25 | CardTitle.defaultProps = {}; 26 | 27 | CardTitle.displayName = 'CardTitle'; 28 | 29 | export default CardTitle; 30 | -------------------------------------------------------------------------------- /src/Card/doc/Card-propsTable.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext } from 'react'; 14 | import { useContextState } from '../../utils/helpers'; 15 | 16 | import { StyledCard } from '../Card-styled'; 17 | 18 | const CardContext = createContext({ 19 | cardContext: { 20 | shaped: undefined, 21 | wide: undefined 22 | } 23 | }); 24 | CardContext.displayName = 'CardContext'; 25 | 26 | const Card = ({ children, shaped, wide, ...other }) => { 27 | const cardContext = useContextState({ 28 | shaped, 29 | wide 30 | }); 31 | 32 | return ( 33 | 34 | 35 | {children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | Card.propTypes = { 42 | /** The content of the component. */ 43 | children: PropTypes.node, 44 | /** Style prop to show a colored bar across the top of the Card; can take a string for any color name in EsriColors. */ 45 | bar: PropTypes.string, 46 | /** Style prop to add a shape mask to the CardImage. */ 47 | shaped: PropTypes.bool, 48 | /** Style prop to position Card content horizontally and fill the width of its container. */ 49 | wide: PropTypes.bool 50 | }; 51 | 52 | Card.defaultProps = {}; 53 | 54 | Card.displayName = 'Card'; 55 | 56 | export { Card as default, CardContext }; 57 | -------------------------------------------------------------------------------- /src/Card/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Card'; 13 | export { default as CardImage } from './CardImage'; 14 | export { default as CardTitle } from './CardTitle'; 15 | export { default as CardContent } from './CardContent'; 16 | -------------------------------------------------------------------------------- /src/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Checkbox'; 13 | -------------------------------------------------------------------------------- /src/ComboButton/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './ComboButton'; 13 | -------------------------------------------------------------------------------- /src/CopyToClipboard/CopyToClipboard-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled, { keyframes } from 'styled-components'; 14 | 15 | // Utils, common elements 16 | import { transition } from '../utils/helpers'; 17 | import { CalciteInput } from '../utils/commonElements'; 18 | 19 | // Calcite theme and Esri colors 20 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 21 | 22 | // Calcite components 23 | import Button from '../Button'; 24 | 25 | // Icons 26 | 27 | // Third party libraries 28 | 29 | const FadeIn = keyframes` 30 | from { 31 | opacity: 0; 32 | } 33 | to { 34 | opacity: 1; 35 | } 36 | `; 37 | 38 | const StyledCopyToClipboard = styled.div` 39 | display: flex; 40 | 41 | svg { 42 | animation: ${FadeIn} ${transition()}; 43 | } 44 | `; 45 | StyledCopyToClipboard.defaultProps = { theme }; 46 | 47 | const StyledCopyToClipboardInput = styled(CalciteInput)` 48 | flex: 1 0 50px; 49 | width: auto; 50 | margin: 0; 51 | border-right: none; 52 | border-top-right-radius: 0; 53 | border-bottom-right-radius: 0; 54 | 55 | html[dir='rtl'] & { 56 | border-right: 1px solid ${props => props.theme.palette.lightGray}; 57 | border-top-right-radius: ${props => props.theme.borderRadius}; 58 | border-bottom-right-radius: ${props => props.theme.borderRadius}; 59 | 60 | border-left: none; 61 | border-top-left-radius: 0; 62 | border-bottom-left-radius: 0; 63 | } 64 | `; 65 | StyledCopyToClipboardInput.defaultProps = { theme }; 66 | 67 | const StyledCopyButton = styled(Button)` 68 | border-top-left-radius: 0; 69 | border-bottom-left-radius: 0; 70 | 71 | html[dir='rtl'] & { 72 | border-top-left-radius: ${props => props.theme.borderRadius}; 73 | border-bottom-left-radius: ${props => props.theme.borderRadius}; 74 | 75 | border-top-right-radius: 0; 76 | border-bottom-right-radius: 0; 77 | } 78 | 79 | svg { 80 | margin: 0 !important; 81 | } 82 | `; 83 | StyledCopyButton.defaultProps = { theme }; 84 | 85 | export { StyledCopyToClipboard, StyledCopyToClipboardInput, StyledCopyButton }; 86 | -------------------------------------------------------------------------------- /src/CopyToClipboard/doc/CopyToClipboard.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: CopyToClipboard 3 | route: /copy-to-clipboard 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | 9 | import CopyToClipboard from '../'; 10 | 11 | import Button from '../../Button'; 12 | 13 | # CopyToClipboard 14 | 15 | A component that allows you to easily make snippets of text selectable and add 16 | it to your clipboard for pasting in another location. 17 | 18 | #### Import Syntax 19 | 20 | ```js 21 | import CopyToClipboard from 'calcite-react/CopyToClipboard' 22 | ``` 23 | 24 | ## Basic Usage 25 | 26 | 27 | 28 | 1D0830C9A2A0681A9EFBB001E5B9302BDF6DF02FD52C07DD6F88A3FC1B52DA84 29 | 30 | 31 | 32 | ## Custom Components 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ## Props 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/CopyToClipboard/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './CopyToClipboard'; 13 | -------------------------------------------------------------------------------- /src/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './DatePicker'; 13 | export { default as DateRangePicker } from './DateRangePicker'; 14 | -------------------------------------------------------------------------------- /src/Drawer/Drawer.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import ReactDOM from 'react-dom'; 15 | import { StyledDrawer, StyledDrawerNav } from './Drawer-styled'; 16 | 17 | const Drawer = ({ 18 | children, 19 | active, 20 | right, 21 | drawerWidth, 22 | onRequestClose, 23 | drawerNavStyle, 24 | ...other 25 | }) => { 26 | function gutterClicked(e) { 27 | if (e.target === e.currentTarget) { 28 | onRequestClose(e); 29 | } 30 | } 31 | 32 | const drawer = ( 33 | 34 | 40 | {children} 41 | 42 | 43 | ); 44 | 45 | return ReactDOM.createPortal(drawer, document.body); 46 | }; 47 | 48 | Drawer.propTypes = { 49 | /** Child elements to be rendered inside the Drawer. */ 50 | children: PropTypes.node, 51 | /** Toggle visibility of the Drawer. */ 52 | active: PropTypes.bool, 53 | /** Display the Drawer on the right side of the screen. */ 54 | right: PropTypes.bool, 55 | /** Width (in px) of the Drawer nav. */ 56 | drawerWidth: PropTypes.number, 57 | /** Function called when the user clicks the overlay area of a Drawer. */ 58 | onRequestClose: PropTypes.func, 59 | /** Styles passed to the DrawerNav subcomponent. */ 60 | drawerNavStyle: PropTypes.node 61 | }; 62 | 63 | Drawer.defaultProps = { 64 | drawerWidth: 280, 65 | onRequestClose: () => {} 66 | }; 67 | 68 | Drawer.displayName = 'Drawer'; 69 | 70 | export default Drawer; 71 | -------------------------------------------------------------------------------- /src/Drawer/doc/Drawer-propsTable.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import { StyledDrawer, StyledDrawerNav } from '../Drawer-styled'; 4 | 5 | const Drawer = ({ 6 | children, 7 | active, 8 | right, 9 | drawerWidth, 10 | onRequestClose, 11 | drawerNavStyle, 12 | ...other 13 | }) => { 14 | function gutterClicked(e) { 15 | if (e.target === e.currentTarget) { 16 | onRequestClose(e); 17 | } 18 | } 19 | 20 | return ( 21 | 22 | 28 | {children} 29 | 30 | 31 | ); 32 | }; 33 | 34 | Drawer.propTypes = { 35 | /** Child elements to be rendered inside the Drawer */ 36 | children: PropTypes.node, 37 | /** Toggle visibility of the drawer */ 38 | active: PropTypes.bool, 39 | /** Display the drawer on the right side of the screen */ 40 | right: PropTypes.bool, 41 | /** Width (in px) of the drawer nav */ 42 | drawerWidth: PropTypes.number, 43 | /** Function called when the user clicks the overlay area of a drawer */ 44 | onRequestClose: PropTypes.func, 45 | /** Styles passed to the DrawerNav sub-component */ 46 | drawerNavStyle: PropTypes.node 47 | }; 48 | 49 | Drawer.defaultProps = { 50 | drawerWidth: 280, 51 | onRequestClose: () => {} 52 | }; 53 | 54 | Drawer.displayName = 'Drawer'; 55 | 56 | export default Drawer; 57 | -------------------------------------------------------------------------------- /src/Drawer/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Drawer'; 13 | -------------------------------------------------------------------------------- /src/Elements/doc/Elements.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Elements 3 | route: /elements 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | 8 | import { 9 | CalciteP, 10 | CalciteA, 11 | CalciteH1, 12 | CalciteH2, 13 | CalciteH3, 14 | CalciteH4, 15 | CalciteH5, 16 | CalciteH6, 17 | CalciteOl, 18 | CalciteUl, 19 | CalciteLi 20 | } from '../'; 21 | 22 | # Elements 23 | 24 | Generic HTML elements 25 | 26 | #### Import Syntax 27 | 28 | ```js 29 | import { 30 | CalciteP, 31 | CalciteA, 32 | CalciteH1, 33 | CalciteH2, 34 | CalciteH3, 35 | CalciteH4, 36 | CalciteH5, 37 | CalciteH6, 38 | CalciteOl, 39 | CalciteUl, 40 | CalciteLi 41 | } from 'calcite-react/Elements' 42 | ``` 43 | 44 | ## Calcite Headers 45 | 46 | 47 | Title H1 48 | Title H2 49 | Title H3 50 | Title H4 51 | Title H5 52 | Title H6 53 | 54 | 55 | ## CalciteP 56 | 57 | 58 | 59 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo 60 | ligula, aliquet vel lectus quis, accumsan maximus ex. Nulla maximus augue 61 | vitae nunc ultricies sodales. 62 | 63 | 64 | 65 | ## CalciteA 66 | 67 | 68 | A Link 69 | 70 | 71 | ## CalciteOl 72 | 73 | 74 | 75 | Item 1 76 | Item 2 77 | Item 3 78 | 79 | 80 | 81 | ## CalciteUl 82 | 83 | 84 | 85 | Item 1 86 | Item 2 87 | Item 3 88 | 89 | 90 | 91 | ## Plain List 92 | 93 | 94 | 95 | Item 1 96 | Item 2 97 | Item 3 98 | 99 | 100 | Item 1 101 | Item 2 102 | Item 3 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/Elements/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { 13 | CalciteHtml, 14 | CalciteBody, 15 | CalciteP, 16 | CalciteA, 17 | CalciteH1, 18 | CalciteH2, 19 | CalciteH3, 20 | CalciteH4, 21 | CalciteH5, 22 | CalciteH6, 23 | CalciteOl, 24 | CalciteUl, 25 | CalciteLi, 26 | CalciteFigure 27 | } from './Elements-styled'; 28 | -------------------------------------------------------------------------------- /src/FileUploader/FileUploader.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { StyledFileUploader } from './FileUploader-styled'; 15 | 16 | const FileUploader = ({ 17 | children, 18 | field, 19 | form, 20 | success = false, 21 | error = false, 22 | disabled = false, 23 | onChange, 24 | ...other 25 | }) => { 26 | let name, touched, errors, isSubmitting, setTouched, setFieldValue; 27 | if (field) { 28 | name = field.name; 29 | touched = form.touched; 30 | errors = form.errors; 31 | isSubmitting = form.isSubmitting; 32 | setTouched = form.setTouched; 33 | setFieldValue = form.setFieldValue; 34 | } 35 | 36 | const handleChange = e => { 37 | if (setFieldValue) { 38 | setTouched({ ...touched, [name]: true }); 39 | setFieldValue(name, e.currentTarget.files); 40 | } 41 | 42 | onChange(e); 43 | }; 44 | 45 | const isSuccess = () => { 46 | if (touched) { 47 | return touched[name] && !errors[name] ? true : false; 48 | } 49 | return success; 50 | }; 51 | 52 | const isError = () => { 53 | if (touched) { 54 | return touched[name] && errors[name] ? true : false; 55 | } 56 | return error; 57 | }; 58 | 59 | const isDisabled = () => { 60 | return isSubmitting || disabled; 61 | }; 62 | 63 | return ( 64 | 73 | ); 74 | }; 75 | 76 | FileUploader.propTypes = { 77 | /** The callback function when the selected file is changed. */ 78 | onChange: PropTypes.func 79 | }; 80 | 81 | FileUploader.defaultProps = { 82 | onChange: () => {} 83 | }; 84 | 85 | FileUploader.displayName = 'FileUploader'; 86 | 87 | export default FileUploader; 88 | -------------------------------------------------------------------------------- /src/FileUploader/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './FileUploader'; 13 | -------------------------------------------------------------------------------- /src/Form/Fieldset.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext, createContext } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledFieldset } from './Form-styled'; 17 | 18 | import { FormControlContext } from './FormControl'; 19 | 20 | const FieldsetContext = createContext({ 21 | fieldsetContext: { 22 | name: undefined 23 | } 24 | }); 25 | FieldsetContext.displayName = 'FieldsetContext'; 26 | 27 | const Fieldset = ({ children, name, ...other }) => { 28 | const fieldsetContext = useContextState({ 29 | name 30 | }); 31 | const formControlContext = useContext(FormControlContext); 32 | 33 | return ( 34 | 35 | 36 | {children} 37 | 38 | 39 | ); 40 | }; 41 | 42 | Fieldset.propTypes = { 43 | /** The content of the component. */ 44 | children: PropTypes.node, 45 | /** The HTML name property applied to the contained radios and checkboxes. */ 46 | name: PropTypes.string.isRequired 47 | }; 48 | 49 | Fieldset.defaultProps = {}; 50 | 51 | Fieldset.displayName = 'Fieldset'; 52 | 53 | export { Fieldset as default, FieldsetContext }; 54 | -------------------------------------------------------------------------------- /src/Form/Form.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledForm } from './Form-styled'; 17 | 18 | const FormContext = createContext({ noValidation: false }); 19 | FormContext.displayName = 'FormContext'; 20 | 21 | const Form = ({ children, noValidation, ...other }) => { 22 | const formContext = useContextState({ 23 | noValidation 24 | }); 25 | 26 | return ( 27 | 28 | {children} 29 | 30 | ); 31 | }; 32 | 33 | Form.propTypes = { 34 | /** The content of the component. */ 35 | children: PropTypes.node, 36 | /** Display prop to make Forms align items horizontally instead of vertically. */ 37 | horizontal: PropTypes.bool, 38 | /** If the FormControl doesn't need validation, you can set this to true to tighten up the bottom margin. */ 39 | noValidation: PropTypes.bool 40 | }; 41 | 42 | Form.defaultProps = {}; 43 | 44 | Form.displayName = 'Form'; 45 | 46 | export { Form as default, FormContext }; 47 | -------------------------------------------------------------------------------- /src/Form/FormControl.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext, useMemo, createContext } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import uniqid from 'uniqid'; 17 | import { StyledFormControl } from './Form-styled'; 18 | 19 | import { FormContext } from './Form'; 20 | 21 | const FormControlContext = createContext({ 22 | horizontal: undefined, 23 | error: undefined, 24 | success: undefined, 25 | _generatedId: undefined 26 | }); 27 | FormControlContext.displayName = 'FormControlContext'; 28 | 29 | const FormControl = ({ children, error, success, horizontal, ...other }) => { 30 | const _generatedId = useMemo(uniqid, []); 31 | const formControlContext = useContextState({ 32 | horizontal, 33 | error, 34 | success, 35 | _generatedId 36 | }); 37 | const formContext = useContext(FormContext); 38 | 39 | return ( 40 | 41 | 48 | {children} 49 | 50 | 51 | ); 52 | }; 53 | 54 | FormControl.propTypes = { 55 | /** The content of the component. */ 56 | children: PropTypes.node, 57 | /** The FormControl should show an error. */ 58 | error: PropTypes.bool, 59 | /** The FormControl should show success. */ 60 | success: PropTypes.bool, 61 | /** The FormControl should layout as horizontal elements. */ 62 | horizontal: PropTypes.bool, 63 | /** If the FormControl doesn't need validation, you can set this to true to tighten up the bottom margin. */ 64 | noValidation: PropTypes.bool 65 | }; 66 | 67 | FormControl.defaultProps = {}; 68 | 69 | FormControl.displayName = 'FormControl'; 70 | 71 | export { FormControl as default, FormControlContext }; 72 | -------------------------------------------------------------------------------- /src/Form/FormControlLabel.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledFormControlLabel } from './Form-styled'; 16 | 17 | import { FormControlContext } from './FormControl'; 18 | 19 | const FormControlLabel = ({ children, htmlFor, ...other }) => { 20 | const formControlContext = useContext(FormControlContext); 21 | 22 | return ( 23 | 30 | {children} 31 | 32 | ); 33 | }; 34 | 35 | FormControlLabel.propTypes = { 36 | /** The text content of the component. */ 37 | children: PropTypes.node, 38 | /** The for property to be applied to the label; should match a form element id. */ 39 | htmlFor: PropTypes.string, 40 | /** The FormControlLabel should show an error. */ 41 | error: PropTypes.bool, 42 | /** The FormControlLabel should show success. */ 43 | success: PropTypes.bool, 44 | /** Display prop to make this element align items horizontally instead of vertically. */ 45 | horizontal: PropTypes.bool 46 | }; 47 | 48 | FormControlLabel.defaultProps = {}; 49 | 50 | FormControlLabel.displayName = 'FormControlLabel'; 51 | 52 | export default FormControlLabel; 53 | -------------------------------------------------------------------------------- /src/Form/FormHelperText.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | import { StyledFormHelperText } from './Form-styled'; 15 | 16 | import { FormControlContext } from './FormControl'; 17 | 18 | const FormHelperText = ({ children, ...other }) => { 19 | const formControlContext = useContext(FormControlContext); 20 | 21 | return ( 22 | 27 | {children} 28 | 29 | ); 30 | }; 31 | 32 | FormHelperText.propTypes = { 33 | /** The text content of the component. */ 34 | children: PropTypes.node, 35 | /** The FormHelperText should display as an error. */ 36 | error: PropTypes.bool, 37 | /** The FormHelperText should display as successful. */ 38 | success: PropTypes.bool 39 | }; 40 | 41 | FormHelperText.defaultProps = {}; 42 | 43 | FormHelperText.displayName = 'FormHelperText'; 44 | 45 | export default FormHelperText; 46 | -------------------------------------------------------------------------------- /src/Form/Legend.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledLegend } from './Form-styled'; 16 | 17 | import { FormControlContext } from './FormControl'; 18 | 19 | const Legend = ({ children, ...other }) => { 20 | const formControlContext = useContext(FormControlContext); 21 | 22 | return ( 23 | 24 | {children} 25 | 26 | ); 27 | }; 28 | 29 | Legend.propTypes = { 30 | /** The content of the component. */ 31 | children: PropTypes.node, 32 | /** Display prop to make this element align items horizontally instead of vertically. */ 33 | horizontal: PropTypes.bool 34 | }; 35 | 36 | Legend.defaultProps = {}; 37 | 38 | Legend.displayName = 'Legend'; 39 | 40 | export default Legend; 41 | -------------------------------------------------------------------------------- /src/Form/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Form'; 13 | export { default as FormControl } from './FormControl'; 14 | export { default as FormControlLabel } from './FormControlLabel'; 15 | export { default as FormHelperText } from './FormHelperText'; 16 | export { default as Legend } from './Legend'; 17 | export { default as Fieldset } from './Fieldset'; 18 | -------------------------------------------------------------------------------- /src/Label/Label-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled, { css } from 'styled-components'; 14 | 15 | // Utils, common elements 16 | import { fontSize } from '../utils/helpers'; 17 | 18 | // Calcite theme and Esri colors 19 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 20 | 21 | // Calcite components 22 | 23 | // Icons 24 | 25 | // Third party libraries 26 | 27 | const StyledLabel = styled.mark` 28 | background-color: ${props => props.theme.palette.lightestGray}; 29 | padding: 0.25em 0.5em; 30 | border-radius: ${props => props.theme.borderRadius || '3px'}; 31 | ${fontSize(-2)}; 32 | white-space: nowrap; 33 | 34 | ${props => 35 | props.red && 36 | css` 37 | background-color: ${props => props.theme.palette.red}; 38 | color: ${props => props.theme.palette.white}; 39 | `}; 40 | 41 | ${props => 42 | props.yellow && 43 | css` 44 | background-color: ${props => props.theme.palette.lightYellow}; 45 | color: ${props => props.theme.palette.offBlack}; 46 | `}; 47 | 48 | ${props => 49 | props.green && 50 | css` 51 | background-color: ${props => props.theme.palette.green}; 52 | color: ${props => props.theme.palette.white}; 53 | `}; 54 | 55 | ${props => 56 | props.blue && 57 | css` 58 | background-color: ${props => props.theme.palette.blue}; 59 | color: ${props => props.theme.palette.white}; 60 | `}; 61 | `; 62 | StyledLabel.defaultProps = { theme }; 63 | 64 | export { StyledLabel }; 65 | -------------------------------------------------------------------------------- /src/Label/Label.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | import { StyledLabel } from './Label-styled'; 15 | 16 | const Label = ({ children, ...other }) => { 17 | return {children}; 18 | }; 19 | 20 | Label.propTypes = { 21 | /** Content of the Label. */ 22 | children: PropTypes.node, 23 | /** Blue style Label. */ 24 | blue: PropTypes.bool, 25 | /** Green style Label. */ 26 | green: PropTypes.bool, 27 | /** Yellow style Label. */ 28 | yellow: PropTypes.bool, 29 | /** Red style Label. */ 30 | red: PropTypes.bool 31 | }; 32 | 33 | Label.defaultProps = {}; 34 | 35 | Label.displayName = 'Label'; 36 | 37 | export default Label; 38 | -------------------------------------------------------------------------------- /src/Label/doc/Label.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Label 3 | route: /label 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | 9 | import Label from '../'; 10 | 11 | # Label 12 | 13 | Labels are a way to call attention to a word. The mark element, a notification 14 | count, or an important indicator (like marking a technology as 'beta' or 15 | 'private') are all use cases for labels. 16 | 17 | #### Import Syntax 18 | 19 | ```js 20 | import Label from 'calcite-react/Label' 21 | ``` 22 | 23 | ## Basic Usage 24 | 25 | 26 | 27 | 28 | 29 | ## Colors 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ## Props 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/Label/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Label'; 13 | -------------------------------------------------------------------------------- /src/List/ListHeader.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledListHeader } from './List-styled'; 16 | 17 | import { ListContext } from './List'; 18 | 19 | const ListHeader = ({ children, ...other }) => { 20 | const listContext = useContext(ListContext); 21 | 22 | return ( 23 | 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | ListHeader.propTypes = { 35 | /** The content of the component. */ 36 | children: PropTypes.node 37 | }; 38 | 39 | ListHeader.defaultProps = {}; 40 | 41 | ListHeader.displayName = 'ListHeader'; 42 | 43 | export default ListHeader; 44 | -------------------------------------------------------------------------------- /src/List/ListItemSubtitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledListSubtitle } from './List-styled'; 16 | 17 | import { ListContext } from './List'; 18 | 19 | const ListSubtitle = ({ children, ...other }) => { 20 | const listContext = useContext(ListContext); 21 | 22 | return ( 23 | 24 | {children} 25 | 26 | ); 27 | }; 28 | 29 | ListSubtitle.propTypes = { 30 | /** Content of the Subtitle. */ 31 | children: PropTypes.node, 32 | /** Applied when the List is imbedded inside another List. */ 33 | nested: PropTypes.bool 34 | }; 35 | 36 | ListSubtitle.defaultProps = {}; 37 | 38 | ListSubtitle.displayName = 'ListSubtitle'; 39 | 40 | export default ListSubtitle; 41 | -------------------------------------------------------------------------------- /src/List/ListItemTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledListTitle } from './List-styled'; 16 | 17 | import { ListContext } from './List'; 18 | 19 | const ListTitle = ({ children, ...other }) => { 20 | const listContext = useContext(ListContext); 21 | 22 | return ( 23 | 24 | {children} 25 | 26 | ); 27 | }; 28 | 29 | ListTitle.propTypes = { 30 | /** Content of the ItemTitle. */ 31 | children: PropTypes.node, 32 | /** Applied when the List is imbedded inside another List. */ 33 | nested: PropTypes.bool 34 | }; 35 | 36 | ListTitle.defaultProps = {}; 37 | 38 | ListTitle.displayName = 'ListTitle'; 39 | 40 | export default ListTitle; 41 | -------------------------------------------------------------------------------- /src/List/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './List'; 13 | export { default as ListHeader } from './ListHeader'; 14 | export { default as ListItem } from './ListItem'; 15 | export { default as ListItemTitle } from './ListItemTitle'; 16 | export { default as ListItemSubtitle } from './ListItemSubtitle'; 17 | -------------------------------------------------------------------------------- /src/Loader/Loader.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { 16 | StyledLoaderText, 17 | StyledLoader, 18 | StyledLoaderBars 19 | } from './Loader-styled'; 20 | 21 | const Loader = ({ text, sizeRatio, color, ...other }) => { 22 | const sizePx = sizeRatio * 17; 23 | 24 | const getLoaderText = text => { 25 | if (text) { 26 | return {text}; 27 | } 28 | }; 29 | 30 | return ( 31 | 32 | 33 | {getLoaderText(text)} 34 | 35 | ); 36 | }; 37 | 38 | Loader.propTypes = { 39 | /** Text displayed below the loading bars. */ 40 | text: PropTypes.string, 41 | /** Relative size of the Loader component. Value must be greater than 0. A value of 1 results in a 50px height Loader */ 42 | sizeRatio: PropTypes.number, 43 | /** Color of the Loader bars */ 44 | color: PropTypes.string 45 | }; 46 | 47 | Loader.defaultProps = { 48 | sizeRatio: 1 49 | }; 50 | 51 | Loader.displayName = 'Loader'; 52 | 53 | export default Loader; 54 | -------------------------------------------------------------------------------- /src/Loader/doc/Loader.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Loader 3 | route: /loader 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | import { colors } from '@esri/calcite-colors'; 9 | 10 | import Loader from '../'; 11 | 12 | # Loader 13 | 14 | The Loader element is a placeholder while content is being retrieved or 15 | rendered. 16 | 17 | #### Import Syntax 18 | 19 | ```js 20 | import Loader from 'calcite-react/Loader'; 21 | ``` 22 | 23 | ## Basic Usage 24 | 25 | 26 | 27 | 28 | 29 | ## With Text 30 | 31 | 32 | 33 | 34 | 35 | ## Custom Size 36 | 37 | 38 | 39 | 40 | 41 | 42 | ## Custom Color 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ## Props 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/Loader/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Loader'; 13 | -------------------------------------------------------------------------------- /src/Menu/Menu.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { createContext, forwardRef } from 'react'; 14 | import { useContextState } from '../utils/helpers'; 15 | 16 | import { StyledMenu } from './Menu-styled'; 17 | 18 | const MenuContext = createContext({ 19 | extraSmall: undefined, 20 | small: undefined, 21 | large: undefined, 22 | extraLarge: undefined 23 | }); 24 | MenuContext.displayName = 'MenuContext'; 25 | 26 | const Menu = forwardRef( 27 | ({ children, extraSmall, small, large, extraLarge, ...other }, ref) => { 28 | const menuContext = useContextState({ 29 | extraSmall, 30 | small, 31 | large, 32 | extraLarge 33 | }); 34 | 35 | return ( 36 | 37 | 45 | {children} 46 | 47 | 48 | ); 49 | } 50 | ); 51 | 52 | Menu.propTypes = { 53 | /** Content node for the Menu. */ 54 | children: PropTypes.node, 55 | /** Style prop used to render an extra small Menu. */ 56 | extraSmall: PropTypes.bool, 57 | /** Style prop used to render a small Menu. */ 58 | small: PropTypes.bool, 59 | /** Style prop used to render a large Menu. */ 60 | large: PropTypes.bool, 61 | /** Style prop used to render an extra large Menu. */ 62 | extraLarge: PropTypes.bool 63 | }; 64 | 65 | Menu.defaultProps = {}; 66 | 67 | Menu.displayName = 'Menu'; 68 | 69 | export { Menu as default, MenuContext }; 70 | -------------------------------------------------------------------------------- /src/Menu/MenuItem.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | import { StyledMenuItem, StyledMenuItemSubtitle } from './Menu-styled'; 15 | 16 | import { MenuContext } from './Menu'; 17 | 18 | const MenuItem = ({ children, subtitle, ...other }) => { 19 | const menuContext = useContext(MenuContext); 20 | 21 | const getSubtitle = subtitle => { 22 | if (subtitle) { 23 | return {subtitle}; 24 | } 25 | }; 26 | 27 | return ( 28 | 35 | {children} 36 | {getSubtitle(subtitle)} 37 | 38 | ); 39 | }; 40 | 41 | MenuItem.propTypes = { 42 | /** Content of the MenuItem. */ 43 | children: PropTypes.node, 44 | /** A container for content to be displayed right aligned in the MenuItem. */ 45 | subtitle: PropTypes.node, 46 | /** Toggle the disabled state of the MenuItem, results in the item being unselectable and slightly lower opacity */ 47 | disabled: PropTypes.bool 48 | }; 49 | 50 | MenuItem.defaultProps = {}; 51 | 52 | MenuItem.displayName = 'MenuItem'; 53 | 54 | export default MenuItem; 55 | -------------------------------------------------------------------------------- /src/Menu/MenuTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledMenuTitle } from './Menu-styled'; 16 | import { MenuContext } from './Menu'; 17 | 18 | const MenuTitle = ({ children, ...other }) => { 19 | const menuContext = useContext(MenuContext); 20 | 21 | return ( 22 | 30 | {children} 31 | 32 | ); 33 | }; 34 | 35 | MenuTitle.propTypes = { 36 | /** Content of the MenuTitle. */ 37 | children: PropTypes.node 38 | }; 39 | 40 | MenuTitle.defaultProps = {}; 41 | 42 | MenuTitle.displayName = 'MenuTitle'; 43 | 44 | export default MenuTitle; 45 | -------------------------------------------------------------------------------- /src/Menu/doc/Menu-propsTable.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import { StyledMenu } from '../Menu-styled'; 4 | 5 | const Menu = ({ children, ...other }) => { 6 | return {children}; 7 | }; 8 | 9 | Menu.propTypes = { 10 | /** Content node for the Menu */ 11 | children: PropTypes.node, 12 | /** Style prop used to render an extra small Menu. */ 13 | extraSmall: PropTypes.bool, 14 | /** Style prop used to render a small Menu. */ 15 | small: PropTypes.bool, 16 | /** Style prop used to render a large Menu. */ 17 | large: PropTypes.bool, 18 | /** Style prop used to render an extra large Menu. */ 19 | extraLarge: PropTypes.bool 20 | }; 21 | 22 | Menu.defaultProps = {}; 23 | 24 | Menu.displayName = 'Menu'; 25 | 26 | export default Menu; 27 | -------------------------------------------------------------------------------- /src/Menu/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Menu'; 13 | export { default as MenuTitle } from './MenuTitle'; 14 | export { default as MenuItem } from './MenuItem'; 15 | -------------------------------------------------------------------------------- /src/Modal/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Modal'; 13 | export { StyledModalActions as ModalActions } from './Modal-styled'; 14 | -------------------------------------------------------------------------------- /src/MultiSelect/MultiSelect-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled, { css } from 'styled-components'; 14 | 15 | // Utils, common elements 16 | import { transition } from '../utils/helpers'; 17 | import { CalciteSelect } from '../utils/commonElements'; 18 | 19 | // Calcite theme and Esri colors 20 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 21 | 22 | // Calcite components 23 | import Menu from '../Menu'; 24 | 25 | // Icons 26 | 27 | // Third party libraries 28 | 29 | const StyledMultiSelectWrapper = styled.div` 30 | position: relative; 31 | `; 32 | StyledMultiSelectWrapper.defaultProps = { theme }; 33 | 34 | const StyledMultiSelectButton = styled(CalciteSelect)` 35 | cursor: pointer; 36 | overflow: hidden; 37 | white-space: nowrap; 38 | text-overflow: ellipsis; 39 | text-align: initial; 40 | `; 41 | StyledMultiSelectButton.defaultProps = { theme }; 42 | 43 | const StyledMultiSelectMenu = styled(Menu)` 44 | max-height: 300px; 45 | border-bottom: none; 46 | box-shadow: ${props => props.theme.boxShadow}, 47 | 0 1px 0 ${props => props.theme.palette.lightestGray}; 48 | transition: opacity ${transition()}; 49 | z-index: 2000; 50 | display: none; 51 | 52 | ${props => 53 | props.isOpen && 54 | css` 55 | display: block; 56 | `}; 57 | 58 | ${props => 59 | props.fullWidth && 60 | css` 61 | width: 100%; 62 | `}; 63 | 64 | iframe { 65 | border: none; 66 | } 67 | `; 68 | StyledMultiSelectMenu.defaultProps = { theme }; 69 | 70 | export { 71 | StyledMultiSelectWrapper, 72 | StyledMultiSelectButton, 73 | StyledMultiSelectMenu 74 | }; 75 | -------------------------------------------------------------------------------- /src/MultiSelect/MultiSelectMenu.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | import useResizeAware from 'react-resize-aware'; 7 | 8 | // Component specific modules (Component-styled, etc.) 9 | import { StyledMultiSelectMenu } from './MultiSelect-styled'; 10 | 11 | // App components 12 | 13 | // Third-party components (buttons, icons, etc.) 14 | 15 | // JSON 16 | 17 | // CSS 18 | 19 | const MultiSelectMenu = ({ innerRef, scheduleUpdate, children, ...other }) => { 20 | const resizeReporter = target => { 21 | target && scheduleUpdate && scheduleUpdate(); 22 | }; 23 | 24 | const [resizeListener] = useResizeAware(resizeReporter); 25 | 26 | return ( 27 | 28 | {resizeListener} 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | MultiSelectMenu.propTypes = { 35 | /** Ref of the Popper wrapping this component */ 36 | innerRef: PropTypes.func, 37 | /** Popper method to call when the component resizes */ 38 | scheduleUpdate: PropTypes.func 39 | }; 40 | 41 | MultiSelectMenu.defaultProps = {}; 42 | 43 | export default MultiSelectMenu; 44 | -------------------------------------------------------------------------------- /src/MultiSelect/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './MultiSelect'; 13 | -------------------------------------------------------------------------------- /src/Panel/Panel.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledPanel } from './Panel-styled'; 16 | 17 | const Panel = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | Panel.propTypes = { 22 | /** Content of the Panel. */ 23 | children: PropTypes.node, 24 | /** Hide the border of the Panel. */ 25 | noBorder: PropTypes.bool, 26 | /** Remove the padding from the Panel. */ 27 | noPadding: PropTypes.bool, 28 | /** Dark style Panel. */ 29 | dark: PropTypes.bool, 30 | /** Black style Panel. */ 31 | black: PropTypes.bool, 32 | /** White style Panel. */ 33 | white: PropTypes.bool, 34 | /** Light Blue style Panel. */ 35 | lightBlue: PropTypes.bool, 36 | /** Blue style Panel. */ 37 | blue: PropTypes.bool, 38 | /** Dark Blue style Panel. */ 39 | darkBlue: PropTypes.bool 40 | }; 41 | 42 | Panel.defaultProps = {}; 43 | 44 | Panel.displayName = 'Panel'; 45 | 46 | export default Panel; 47 | -------------------------------------------------------------------------------- /src/Panel/PanelText.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledPanelText } from './Panel-styled'; 16 | 17 | const PanelText = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | PanelText.propTypes = { 22 | /** Content of the PanelText. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | PanelText.defaultProps = {}; 27 | 28 | PanelText.displayName = 'PanelText'; 29 | 30 | export default PanelText; 31 | -------------------------------------------------------------------------------- /src/Panel/PanelTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledPanelTitle } from './Panel-styled'; 16 | 17 | const PanelTitle = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | PanelTitle.propTypes = { 22 | /** Content of the PanelTitle. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | PanelTitle.defaultProps = {}; 27 | 28 | PanelTitle.displayName = 'PanelTitle'; 29 | 30 | export default PanelTitle; 31 | -------------------------------------------------------------------------------- /src/Panel/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Panel'; 13 | export { default as PanelTitle } from './PanelTitle'; 14 | export { default as PanelText } from './PanelText'; 15 | -------------------------------------------------------------------------------- /src/Popover/Popover-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled, { css } from 'styled-components'; 14 | 15 | // Utils, common elements 16 | 17 | // Calcite theme and Esri colors 18 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 19 | 20 | // Calcite components 21 | import { StyledMenu } from '../Menu/Menu-styled'; 22 | 23 | // Icons 24 | 25 | // Third party libraries 26 | 27 | const StyledTargetWrapper = styled.div` 28 | display: inline-block; 29 | `; 30 | StyledTargetWrapper.defaultProps = { theme }; 31 | 32 | const StyledPopover = styled.div` 33 | box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05); 34 | opacity: 0; 35 | transition: opacity ${props => props.transitionDuration}ms 36 | cubic-bezier(0.4, 0, 0.2, 1); 37 | z-index: 2000; 38 | pointer-events: none; 39 | 40 | &[data-x-out-of-boundaries] { 41 | display: none; 42 | } 43 | 44 | ${props => 45 | props.transitionState === 'entering' && 46 | css` 47 | opacity: 0; 48 | pointer-events: auto; 49 | `}; 50 | 51 | ${props => 52 | props.transitionState === 'entered' && 53 | css` 54 | opacity: 1; 55 | pointer-events: auto; 56 | `}; 57 | 58 | ${StyledMenu} { 59 | box-shadow: none; 60 | } 61 | 62 | iframe { 63 | border: none; 64 | } 65 | `; 66 | StyledPopover.defaultProps = { theme }; 67 | 68 | export { StyledTargetWrapper, StyledPopover }; 69 | -------------------------------------------------------------------------------- /src/Popover/PopoverPopper.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | import useResizeAware from 'react-resize-aware'; 7 | 8 | // Component specific modules (Component-styled, etc.) 9 | import { StyledPopover } from './Popover-styled'; 10 | 11 | // App components 12 | 13 | // Third-party components (buttons, icons, etc.) 14 | 15 | // JSON 16 | 17 | // CSS 18 | 19 | const PopoverPopper = ({ innerRef, scheduleUpdate, children, ...other }) => { 20 | const resizeReporter = target => { 21 | target && scheduleUpdate && scheduleUpdate(); 22 | }; 23 | 24 | const [resizeListener] = useResizeAware(resizeReporter); 25 | 26 | return ( 27 | 28 | {resizeListener} 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | PopoverPopper.propTypes = { 35 | /** Ref of the Popper wrapping this component */ 36 | innerRef: PropTypes.func, 37 | /** Popper method to call when the component resizes */ 38 | scheduleUpdate: PropTypes.func 39 | }; 40 | 41 | PopoverPopper.defaultProps = {}; 42 | 43 | export default PopoverPopper; 44 | -------------------------------------------------------------------------------- /src/Popover/PopoverStyles.css: -------------------------------------------------------------------------------- 1 | .popper { 2 | background: #222; 3 | color: white; 4 | width: 150px; 5 | border-radius: 2px; 6 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 7 | padding: 5px; 8 | } 9 | 10 | .popper .popper__arrow { 11 | width: 0; 12 | height: 0; 13 | border-style: solid; 14 | position: absolute; 15 | margin: 5px; 16 | } 17 | 18 | .popper[data-placement^="top"] { 19 | margin-bottom: 5px; 20 | } 21 | 22 | .popper[data-placement^="top"] .popper__arrow { 23 | border-width: 5px 5px 0 5px; 24 | border-color: #222 transparent transparent transparent; 25 | bottom: -5px; 26 | left: calc(50% - 5px); 27 | margin-top: 0; 28 | margin-bottom: 0; 29 | } 30 | 31 | .popper[data-placement^="bottom"] { 32 | margin-top: 5px; 33 | } 34 | 35 | .popper[data-placement^="bottom"] .popper__arrow { 36 | border-width: 0 5px 5px 5px; 37 | border-color: transparent transparent #222 transparent; 38 | top: -5px; 39 | left: calc(50% - 5px); 40 | margin-top: 0; 41 | margin-bottom: 0; 42 | } 43 | 44 | .popper[data-placement^="right"] { 45 | margin-left: 5px; 46 | } 47 | 48 | .popper[data-placement^="right"] .popper__arrow { 49 | border-width: 5px 5px 5px 0; 50 | border-color: transparent #222 transparent transparent; 51 | left: -5px; 52 | top: calc(50% - 5px); 53 | margin-left: 0; 54 | margin-right: 0; 55 | } 56 | 57 | .popper[data-placement^="left"] { 58 | margin-right: 5px; 59 | } 60 | 61 | .popper[data-placement^="left"] .popper__arrow { 62 | border-width: 5px 0 5px 5px; 63 | border-color: transparent transparent transparent #222; 64 | right: -5px; 65 | top: calc(50% - 5px); 66 | margin-left: 0; 67 | margin-right: 0; 68 | } 69 | 70 | .popper[data-x-out-of-boundaries] { 71 | display: none; 72 | } 73 | -------------------------------------------------------------------------------- /src/Popover/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Popover'; 13 | -------------------------------------------------------------------------------- /src/Progress/Progress.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React from 'react'; 13 | import PropTypes from 'prop-types'; 14 | 15 | import { StyledProgress, Track, Bar, Text } from './Progress-styled'; 16 | 17 | const Progress = ({ 18 | reversed = false, 19 | text = null, 20 | type = 'determinate', 21 | value = 0, 22 | ...other 23 | }) => { 24 | return ( 25 | 26 | 27 | 28 | 29 | {text && {text}} 30 | 31 | ); 32 | }; 33 | 34 | Progress.propTypes = { 35 | /** For indeterminate progress bars, reverse the animation direction */ 36 | reversed: PropTypes.bool, 37 | /** Text label for the progress indicator */ 38 | text: PropTypes.string, 39 | /** Use indeterminate if finding actual progress value is impossible */ 40 | type: PropTypes.oneOf(['determinate', 'indeterminate']), 41 | /** Fraction completed, in the range of 0 - 1.0 */ 42 | value: PropTypes.number 43 | }; 44 | 45 | export default Progress; 46 | -------------------------------------------------------------------------------- /src/Progress/doc/Progress.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Progress 3 | route: /progress 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | 9 | import Progress from '../Progress'; 10 | 11 | # Progress 12 | 13 | Progress is used to show progress on some async task to the user. 14 | 15 | #### Import Syntax 16 | 17 | ```js 18 | import Progress from 'calcite-react/Progress'; 19 | ``` 20 | 21 | ## Determinate 22 | 23 | 24 | 25 | 26 | 27 | ## Indeterminate 28 | 29 | 30 | 31 | 32 | 33 | ## Reversed 34 | 35 | 36 | 37 | 38 | 39 | ## With Text 40 | 41 | 42 | 43 | 44 | 45 | ## Props 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/Progress/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Progress'; 2 | -------------------------------------------------------------------------------- /src/Radio/Radio-styled.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // styled-components 13 | import styled from 'styled-components'; 14 | 15 | // Utils, common elements 16 | import { fontSize, unitCalc } from '../utils/helpers'; 17 | import { baseRadioCheckbox } from '../utils/commonElements'; 18 | 19 | // Calcite theme and Esri colors 20 | import { CalciteTheme as theme } from '../CalciteThemeProvider'; 21 | 22 | // Calcite components 23 | 24 | // Icons 25 | 26 | // Third party libraries 27 | 28 | const StyledRadio = styled(baseRadioCheckbox)` 29 | -webkit-appearance: radio; 30 | flex-shrink: 0; 31 | border-radius: 50%; 32 | margin-right: ${props => unitCalc(props.theme.baseline, 4, '/')}; 33 | cursor: pointer; 34 | 35 | html[dir='rtl'] & { 36 | margin-right: 0.125rem; 37 | margin-left: ${props => unitCalc(props.theme.baseline, 4, '/')}; 38 | } 39 | `; 40 | StyledRadio.defaultProps = { theme }; 41 | 42 | const StyledRadioLabel = styled.span` 43 | ${fontSize(-1)}; 44 | color: ${props => props.theme.palette.darkestGray}; 45 | width: auto; 46 | margin-right: ${props => props.theme.baseline}; 47 | cursor: pointer; 48 | 49 | html[dir='rtl'] & { 50 | margin-right: initial; 51 | margin-left: ${props => props.theme.baseline}; 52 | } 53 | `; 54 | StyledRadioLabel.defaultProps = { theme }; 55 | const StyledRadioGroup = styled.label` 56 | display: flex; 57 | align-items: center; 58 | `; 59 | StyledRadioGroup.defaultProps = { theme }; 60 | 61 | export { StyledRadio, StyledRadioLabel, StyledRadioGroup }; 62 | -------------------------------------------------------------------------------- /src/Radio/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Radio'; 13 | -------------------------------------------------------------------------------- /src/Search/SearchMenu.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | import useResizeAware from 'react-resize-aware'; 7 | 8 | // Component specific modules (Component-styled, etc.) 9 | import { StyledSelectMenu } from '../Select/Select-styled'; 10 | 11 | // App components 12 | 13 | // Third-party components (buttons, icons, etc.) 14 | 15 | // JSON 16 | 17 | // CSS 18 | 19 | const SearchMenu = ({ innerRef, scheduleUpdate, children, ...other }) => { 20 | const resizeReporter = target => { 21 | target && scheduleUpdate && scheduleUpdate(); 22 | }; 23 | 24 | const [resizeListener] = useResizeAware(resizeReporter); 25 | 26 | return ( 27 | 28 | {resizeListener} 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | SearchMenu.propTypes = { 35 | /** Ref of the Popper wrapping this component */ 36 | innerRef: PropTypes.func, 37 | /** Popper method to call when the component resizes */ 38 | scheduleUpdate: PropTypes.func 39 | }; 40 | 41 | SearchMenu.defaultProps = {}; 42 | 43 | export default SearchMenu; 44 | -------------------------------------------------------------------------------- /src/Search/doc/StyledSearch.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Search from '../../Search'; 3 | 4 | import { CalciteTheme as theme } from '../../CalciteThemeProvider'; 5 | 6 | const StyledSearch = styled(Search)` 7 | color: ${props => props.theme.palette.white}; 8 | border-bottom-color: ${props => props.theme.palette.lightBlue}; 9 | 10 | &::placeholder { 11 | color: ${props => props.theme.palette.lighterBlue}; 12 | } 13 | 14 | &:focus { 15 | border-bottom-color: ${props => props.theme.palette.white}; 16 | } 17 | `; 18 | StyledSearch.defaultProps = { theme }; 19 | 20 | export default StyledSearch; 21 | -------------------------------------------------------------------------------- /src/Search/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Search'; 13 | -------------------------------------------------------------------------------- /src/Select/SelectMenu.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | // Redux operations and local helpers/utils/modules 6 | import useResizeAware from 'react-resize-aware'; 7 | 8 | // Component specific modules (Component-styled, etc.) 9 | import { StyledSelectMenu } from './Select-styled'; 10 | 11 | // App components 12 | 13 | // Third-party components (buttons, icons, etc.) 14 | 15 | // JSON 16 | 17 | // CSS 18 | 19 | const SelectMenu = ({ children, innerRef, scheduleUpdate, ...other }) => { 20 | const resizeReporter = target => { 21 | target && scheduleUpdate && scheduleUpdate(); 22 | }; 23 | 24 | const [resizeListener] = useResizeAware(resizeReporter); 25 | 26 | return ( 27 | 28 | {resizeListener} 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | SelectMenu.propTypes = { 35 | /** Ref of the Popper wrapping this component */ 36 | innerRef: PropTypes.func, 37 | /** Popper method to call when the component resizes */ 38 | scheduleUpdate: PropTypes.func 39 | }; 40 | 41 | SelectMenu.defaultProps = {}; 42 | 43 | export default SelectMenu; 44 | -------------------------------------------------------------------------------- /src/Select/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Select'; 13 | -------------------------------------------------------------------------------- /src/SideNav/SideNav.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledSideNav } from './SideNav-styled'; 16 | 17 | const SideNav = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | SideNav.propTypes = { 22 | /** The content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | SideNav.defaultProps = {}; 27 | 28 | SideNav.displayName = 'SideNav'; 29 | 30 | export default SideNav; 31 | -------------------------------------------------------------------------------- /src/SideNav/SideNavLink.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledSideNavLink } from './SideNav-styled'; 16 | 17 | const SideNavLink = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | SideNavLink.propTypes = { 22 | /** The content of the component. */ 23 | children: PropTypes.node, 24 | /** Toggle the disabled state of the SideNavLink, results in the item being unselectable and slightly lower opacity */ 25 | disabled: PropTypes.bool 26 | }; 27 | 28 | SideNavLink.defaultProps = {}; 29 | 30 | SideNavLink.displayName = 'SideNavLink'; 31 | 32 | export default SideNavLink; 33 | -------------------------------------------------------------------------------- /src/SideNav/SideNavTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledSideNavTitle } from './SideNav-styled'; 16 | 17 | const SideNavTitle = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | SideNavTitle.propTypes = { 22 | /** The content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | SideNavTitle.defaultProps = {}; 27 | 28 | SideNavTitle.displayName = 'SideNavTitle'; 29 | 30 | export default SideNavTitle; 31 | -------------------------------------------------------------------------------- /src/SideNav/doc/SideNav.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: SideNav 3 | route: /side-nav 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | import GuideExample from '../../../docz/GuideExample'; 8 | 9 | import SideNav, { SideNavTitle, SideNavLink } from '../'; 10 | 11 | # SideNav 12 | 13 | SideNav can be used either for in-page navigation, or for lists of articles 14 | under a given topic. 15 | 16 | #### Import Syntax 17 | 18 | ```js 19 | import SideNav, { 20 | SideNavTitle, 21 | SideNavLink 22 | } from 'calcite-react/SideNav' 23 | ``` 24 | 25 | ## Basic Usage 26 | 27 | 28 | 29 | Sidenav Group 30 | 36 | 37 | 38 | 39 | ## Props 40 | 41 | ### SideNav `default` 42 | 43 | 44 | 45 | ### SideNavTitle 46 | 47 | 48 | 49 | ### SideNavLink 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/SideNav/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './SideNav'; 13 | export { default as SideNavLink } from './SideNavLink'; 14 | export { default as SideNavTitle } from './SideNavTitle'; 15 | -------------------------------------------------------------------------------- /src/Slider/Slider.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledSlider } from './Slider-styled'; 16 | 17 | const Slider = ({ 18 | value, 19 | min, 20 | max, 21 | field, 22 | form, 23 | success = false, 24 | error = false, 25 | disabled = false, 26 | ...other 27 | }) => { 28 | let name, touched, errors, isSubmitting; 29 | if (field) { 30 | name = field.name; 31 | touched = form.touched; 32 | errors = form.errors; 33 | isSubmitting = form.isSubmitting; 34 | } 35 | 36 | const isSuccess = () => { 37 | if (touched) { 38 | return touched[name] && !errors[name] ? true : false; 39 | } 40 | return success; 41 | }; 42 | 43 | const isError = () => { 44 | if (touched) { 45 | return touched[name] && errors[name] ? true : false; 46 | } 47 | return error; 48 | }; 49 | 50 | const isDisabled = () => { 51 | return isSubmitting || disabled; 52 | }; 53 | 54 | return ( 55 | 70 | ); 71 | }; 72 | 73 | Slider.propTypes = { 74 | /** Numeric value of the current value of the Slider. */ 75 | value: PropTypes.number, 76 | /** Minimum allowable value. */ 77 | min: PropTypes.number, 78 | /** Maximum allowable value. */ 79 | max: PropTypes.number, 80 | /** Size of the steps on the Slider. */ 81 | step: PropTypes.number 82 | }; 83 | 84 | Slider.defaultProps = { 85 | min: 0, 86 | max: 100, 87 | step: 1 88 | }; 89 | 90 | Slider.displayName = 'Slider'; 91 | 92 | export default Slider; 93 | -------------------------------------------------------------------------------- /src/Slider/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Slider'; 13 | -------------------------------------------------------------------------------- /src/Stepper/Step.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledStep, StyledStepTextContainer } from './Stepper-styled'; 16 | import StepIcon from './StepIcon'; 17 | 18 | import { getChildType } from '../utils/helpers'; 19 | 20 | const Step = ({ 21 | children, 22 | stepNumber, 23 | small, 24 | active, 25 | complete, 26 | error, 27 | icon, 28 | vertical, 29 | ...other 30 | }) => { 31 | const childArray = React.Children.toArray(children); 32 | const childrenWithProps = childArray.map((child, i) => { 33 | switch (getChildType(child)) { 34 | case 'StepTitle': 35 | return React.cloneElement(child, { 36 | active, 37 | small, 38 | complete, 39 | error, 40 | vertical 41 | }); 42 | case 'StepDescription': 43 | return React.cloneElement(child, { 44 | active, 45 | small, 46 | complete, 47 | error, 48 | vertical 49 | }); 50 | default: 51 | return child; 52 | } 53 | }); 54 | 55 | return ( 56 | 57 | 65 | {stepNumber} 66 | 67 | 68 | {childrenWithProps} 69 | 70 | 71 | ); 72 | }; 73 | 74 | Step.propTypes = { 75 | /** The content of the component; can be StepTitle or StepDescription. */ 76 | children: PropTypes.node, 77 | /** A style prop used to render the Step in an error state with red text and X icon. */ 78 | error: PropTypes.bool 79 | }; 80 | 81 | Step.defaultProps = {}; 82 | 83 | Step.displayName = 'Step'; 84 | 85 | export default Step; 86 | -------------------------------------------------------------------------------- /src/Stepper/StepDescription.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledStepDescription } from './Stepper-styled'; 16 | 17 | const StepDescription = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | StepDescription.propTypes = { 22 | /** The text content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | StepDescription.defaultProps = {}; 27 | 28 | StepDescription.displayName = 'StepDescription'; 29 | 30 | export default StepDescription; 31 | -------------------------------------------------------------------------------- /src/Stepper/StepTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledStepTitle } from './Stepper-styled'; 16 | 17 | const StepTitle = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | StepTitle.propTypes = { 22 | /** The text content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | StepTitle.defaultProps = {}; 27 | 28 | StepTitle.displayName = 'StepTitle'; 29 | 30 | export default StepTitle; 31 | -------------------------------------------------------------------------------- /src/Stepper/Stepper.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledStepper } from './Stepper-styled'; 16 | 17 | import { getChildType } from '../utils/helpers'; 18 | 19 | const Stepper = ({ children, currentStep, small, vertical, ...other }) => { 20 | const childArray = React.Children.toArray(children); 21 | let currentChildStepNumber = 0; 22 | const childrenWithProps = childArray.map((child, i) => { 23 | switch (getChildType(child)) { 24 | case 'Step': 25 | currentChildStepNumber++; 26 | 27 | return React.cloneElement(child, { 28 | small, 29 | vertical, 30 | stepNumber: currentChildStepNumber, 31 | active: currentChildStepNumber === currentStep, 32 | complete: currentChildStepNumber < currentStep 33 | }); 34 | default: 35 | return child; 36 | } 37 | }); 38 | 39 | return ( 40 | 41 | {childrenWithProps} 42 | 43 | ); 44 | }; 45 | 46 | Stepper.propTypes = { 47 | /** The content of the component; can be a Step. */ 48 | children: PropTypes.node, 49 | /** A style prop used to render small Steps. */ 50 | small: PropTypes.bool, 51 | /** A style prop to position the Steps vertically. */ 52 | vertical: PropTypes.bool 53 | }; 54 | 55 | Stepper.defaultProps = {}; 56 | 57 | Stepper.displayName = 'Stepper'; 58 | 59 | export default Stepper; 60 | -------------------------------------------------------------------------------- /src/Stepper/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Stepper'; 13 | export { default as Step } from './Step'; 14 | export { default as StepTitle } from './StepTitle'; 15 | export { default as StepDescription } from './StepDescription'; 16 | -------------------------------------------------------------------------------- /src/SubNav/SubNavActions.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledSubNavActions } from './SubNav-styled'; 16 | 17 | const SubNavActions = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | SubNavActions.propTypes = { 22 | /** The content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | SubNavActions.defaultProps = {}; 27 | 28 | SubNavActions.displayName = 'SubNavActions'; 29 | 30 | export default SubNavActions; 31 | -------------------------------------------------------------------------------- /src/SubNav/SubNavLink.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { SubNavContext } from './SubNav'; 16 | 17 | import { StyledSubNavLink } from './SubNav-styled'; 18 | 19 | const SubNavLink = ({ children, active, ...other }) => { 20 | const { legacy, backgroundColor } = useContext(SubNavContext); 21 | 22 | return ( 23 | 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | SubNavLink.propTypes = { 35 | /** The text content of the component. */ 36 | children: PropTypes.node, 37 | /** A style prop to represent a NavLink as active or selected. */ 38 | active: PropTypes.bool 39 | }; 40 | 41 | SubNavLink.defaultProps = { 42 | active: undefined 43 | }; 44 | 45 | SubNavLink.displayName = 'SubNavLink'; 46 | 47 | export default SubNavLink; 48 | -------------------------------------------------------------------------------- /src/SubNav/SubNavList.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { SubNavContext } from './SubNav'; 16 | 17 | import { StyledSubNavList } from './SubNav-styled'; 18 | 19 | const SubNavList = ({ children, ...other }) => { 20 | const { legacy } = useContext(SubNavContext); 21 | 22 | return ( 23 | 24 | {children} 25 | 26 | ); 27 | }; 28 | 29 | SubNavList.propTypes = { 30 | /** The content of the component; should be SubNavLinks. */ 31 | children: PropTypes.node 32 | }; 33 | 34 | SubNavList.defaultProps = {}; 35 | 36 | SubNavList.displayName = 'SubNavList'; 37 | 38 | export default SubNavList; 39 | -------------------------------------------------------------------------------- /src/SubNav/SubNavTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledSubNavTitle } from './SubNav-styled'; 16 | 17 | import { SubNavContext } from './SubNav'; 18 | 19 | const SubNavTitle = ({ children, ...other }) => { 20 | const { legacy, blue } = useContext(SubNavContext); 21 | 22 | return ( 23 | 24 | {children} 25 | 26 | ); 27 | }; 28 | 29 | SubNavTitle.propTypes = { 30 | /** The text content of the component. */ 31 | children: PropTypes.node 32 | }; 33 | 34 | SubNavTitle.defaultProps = {}; 35 | 36 | SubNavTitle.displayName = 'SubNavTitle'; 37 | 38 | export default SubNavTitle; 39 | -------------------------------------------------------------------------------- /src/SubNav/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './SubNav'; 13 | export { default as SubNavTitle } from './SubNavTitle'; 14 | export { default as SubNavList } from './SubNavList'; 15 | export { default as SubNavLink } from './SubNavLink'; 16 | export { default as SubNavActions } from './SubNavActions'; 17 | -------------------------------------------------------------------------------- /src/Switch/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Switch'; 13 | -------------------------------------------------------------------------------- /src/Table/TableBody.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableBody } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableBody = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 23 | {children} 24 | 25 | ); 26 | }; 27 | 28 | TableBody.propTypes = { 29 | /** The content of the component. */ 30 | children: PropTypes.node, 31 | /** A style prop to render a TableBody with no column borders. */ 32 | noCol: PropTypes.bool, 33 | /** A style prop to render a TableBody with no row borders. */ 34 | noRow: PropTypes.bool 35 | }; 36 | 37 | TableBody.defaultProps = {}; 38 | 39 | TableBody.displayName = 'TableBody'; 40 | 41 | export default TableBody; 42 | -------------------------------------------------------------------------------- /src/Table/TableCell.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableCell } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableCell = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 23 | {children} 24 | 25 | ); 26 | }; 27 | 28 | TableCell.propTypes = { 29 | /** The content of the component. */ 30 | children: PropTypes.node 31 | }; 32 | 33 | TableCell.defaultProps = {}; 34 | 35 | TableCell.displayName = 'TableCell'; 36 | 37 | export default TableCell; 38 | -------------------------------------------------------------------------------- /src/Table/TableHeader.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableHeader } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableHeader = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 30 | {children} 31 | 32 | ); 33 | }; 34 | 35 | TableHeader.propTypes = { 36 | /** The content of the component. */ 37 | children: PropTypes.node, 38 | /** A style prop to render a Table with no column borders. */ 39 | noCol: PropTypes.bool, 40 | /** A style prop to render a Table with no row borders. */ 41 | noRow: PropTypes.bool 42 | }; 43 | 44 | TableHeader.defaultProps = {}; 45 | 46 | TableHeader.displayName = 'TableHeader'; 47 | 48 | export default TableHeader; 49 | -------------------------------------------------------------------------------- /src/Table/TableHeaderCell.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableHeaderCell } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableHeaderCell = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 31 | {children} 32 | 33 | ); 34 | }; 35 | 36 | TableHeaderCell.propTypes = { 37 | /** The content of the component. */ 38 | children: PropTypes.node 39 | }; 40 | 41 | TableHeaderCell.defaultProps = {}; 42 | 43 | TableHeaderCell.displayName = 'TableHeaderCell'; 44 | 45 | export default TableHeaderCell; 46 | -------------------------------------------------------------------------------- /src/Table/TableHeaderRow.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableHeaderRow } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableHeaderRow = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 28 | {children} 29 | 30 | ); 31 | }; 32 | 33 | TableHeaderRow.propTypes = { 34 | /** The content of the component. */ 35 | children: PropTypes.node, 36 | /** A style prop to render a blue Table. */ 37 | blue: PropTypes.bool, 38 | /** A style prop to render Table with no borders or background color. */ 39 | plain: PropTypes.bool, 40 | /** A style prop to render a Table with no column borders. */ 41 | noCol: PropTypes.bool, 42 | /** A style prop to render a Table with no row borders. */ 43 | noRow: PropTypes.bool 44 | }; 45 | 46 | TableHeaderRow.defaultProps = {}; 47 | 48 | TableHeaderRow.displayName = 'TableHeaderRow'; 49 | 50 | export default TableHeaderRow; 51 | -------------------------------------------------------------------------------- /src/Table/TableRow.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React, { useContext } from 'react'; 14 | 15 | import { StyledTableRow } from './Table-styled'; 16 | 17 | import { TableContext } from './Table'; 18 | 19 | const TableRow = ({ children, ...other }) => { 20 | const tableContext = useContext(TableContext); 21 | return ( 22 | 31 | {children} 32 | 33 | ); 34 | }; 35 | 36 | TableRow.propTypes = { 37 | /** The content of the component. */ 38 | children: PropTypes.node, 39 | /** A style prop to render a blue Table. */ 40 | blue: PropTypes.bool, 41 | /** A style prop to render a Table with striped rows. */ 42 | striped: PropTypes.bool, 43 | /** A style prop to render Table with no borders or background color. */ 44 | plain: PropTypes.bool, 45 | /** A style prop to render Table with no styling. */ 46 | noTable: PropTypes.bool, 47 | /** A style prop to render a Table with no column borders. */ 48 | noCol: PropTypes.bool, 49 | /** A style prop to render a Table with no row borders. */ 50 | noRow: PropTypes.bool 51 | }; 52 | 53 | TableRow.defaultProps = {}; 54 | 55 | TableRow.displayName = 'TableRow'; 56 | 57 | export default TableRow; 58 | -------------------------------------------------------------------------------- /src/Table/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Table'; 13 | export { default as TableHeader } from './TableHeader'; 14 | export { default as TableHeaderRow } from './TableHeaderRow'; 15 | export { default as TableHeaderCell } from './TableHeaderCell'; 16 | export { default as TableBody } from './TableBody'; 17 | export { default as TableRow } from './TableRow'; 18 | export { default as TableCell } from './TableCell'; 19 | -------------------------------------------------------------------------------- /src/Tabs/TabContents.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React, { Children } from 'react'; 13 | import PropTypes from 'prop-types'; 14 | 15 | import { StyledTabContents } from './Tab-styled'; 16 | 17 | import { getChildType } from '../utils/helpers'; 18 | 19 | const TabContents = ({ 20 | children, 21 | activeTabIndex, 22 | gray, 23 | transparent, 24 | translucent, 25 | dark, 26 | ...other 27 | }) => { 28 | const childrenWithProps = Children.map(children, (child, itemIndex) => { 29 | switch (getChildType(child)) { 30 | case 'TabSection': 31 | let section; 32 | if (itemIndex === activeTabIndex) { 33 | section = React.cloneElement(child, { 34 | key: itemIndex, 35 | index: itemIndex, 36 | activeTabIndex, 37 | gray, 38 | transparent, 39 | translucent, 40 | dark 41 | }); 42 | } 43 | return section; 44 | default: 45 | return child; 46 | } 47 | }); 48 | return ( 49 | 56 | {childrenWithProps} 57 | 58 | ); 59 | }; 60 | 61 | TabContents.propTypes = { 62 | /** The content of the component; should be a number of TabSections. */ 63 | children: PropTypes.node 64 | }; 65 | 66 | TabContents.displayName = 'TabContents'; 67 | 68 | export default TabContents; 69 | -------------------------------------------------------------------------------- /src/Tabs/TabNav.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React, { Children } from 'react'; 13 | import PropTypes from 'prop-types'; 14 | 15 | import { StyledTabNav } from './Tab-styled'; 16 | 17 | import { getChildType } from '../utils/helpers'; 18 | 19 | const TabNav = ({ 20 | children, 21 | activeTabIndex, 22 | onTabChange, 23 | gray, 24 | transparent, 25 | translucent, 26 | dark, 27 | ...other 28 | }) => { 29 | const childrenWithProps = Children.map(children, (child, itemIndex) => { 30 | switch (getChildType(child)) { 31 | case 'TabTitle': 32 | return React.cloneElement(child, { 33 | key: itemIndex, 34 | index: itemIndex, 35 | activeTabIndex, 36 | setActiveTabIndex: (e, itemIndex) => onTabChange(itemIndex), 37 | gray, 38 | transparent, 39 | translucent, 40 | dark 41 | }); 42 | default: 43 | return child; 44 | } 45 | }); 46 | return ( 47 | 54 | {childrenWithProps} 55 | 56 | ); 57 | }; 58 | 59 | TabNav.propTypes = { 60 | /** The content of the component; should be a number of TabTitles. */ 61 | children: PropTypes.node 62 | }; 63 | 64 | TabNav.defaultProps = { 65 | onTabChange: () => {} 66 | }; 67 | 68 | TabNav.displayName = 'TabNav'; 69 | 70 | export default TabNav; 71 | -------------------------------------------------------------------------------- /src/Tabs/TabSection.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import React from 'react'; 13 | import PropTypes from 'prop-types'; 14 | 15 | import { StyledTabSection } from './Tab-styled'; 16 | 17 | const TabSection = ({ children, ...other }) => { 18 | return {children}; 19 | }; 20 | 21 | TabSection.propTypes = { 22 | /** The content of the component. */ 23 | children: PropTypes.node 24 | }; 25 | 26 | TabSection.displayName = 'TabSection'; 27 | 28 | export default TabSection; 29 | -------------------------------------------------------------------------------- /src/Tabs/TabTitle.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | import PropTypes from 'prop-types'; 13 | import React from 'react'; 14 | 15 | import { StyledTabTitle } from './Tab-styled'; 16 | 17 | const TabTitle = ({ 18 | children, 19 | index, 20 | activeTabIndex, 21 | setActiveTabIndex, 22 | ...other 23 | }) => { 24 | const handleSetActiveTabIndex = e => { 25 | setActiveTabIndex(e, index); 26 | }; 27 | 28 | return ( 29 | 34 | {children} 35 | 36 | ); 37 | }; 38 | 39 | TabTitle.propTypes = { 40 | /** The text content of the component. */ 41 | children: PropTypes.node 42 | }; 43 | 44 | TabTitle.defaultProps = {}; 45 | 46 | TabTitle.displayName = 'TabTitle'; 47 | 48 | export default TabTitle; 49 | -------------------------------------------------------------------------------- /src/Tabs/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './Tabs'; 13 | export { default as TabNav } from './TabNav'; 14 | export { default as TabContents } from './TabContents'; 15 | export { default as TabTitle } from './TabTitle'; 16 | export { default as TabSection } from './TabSection'; 17 | -------------------------------------------------------------------------------- /src/TextField/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | export { default } from './TextField'; 13 | -------------------------------------------------------------------------------- /src/Toaster/ToastContainer.js: -------------------------------------------------------------------------------- 1 | // Copyright 2019 Esri 2 | // Licensed under the Apache License, Version 2.0 (the "License"); 3 | // you may not use this file except in compliance with the License. 4 | // You may obtain a copy of the License at 5 | // http://www.apache.org/licenses/LICENSE-2.0 6 | // Unless required by applicable law or agreed to in writing, software 7 | // distributed under the License is distributed on an "AS IS" BASIS, 8 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9 | // See the License for the specific language governing permissions and 10 | // limitations under the License.​ 11 | 12 | // Framework and third-party non-ui 13 | import React from 'react'; 14 | import PropTypes from 'prop-types'; 15 | 16 | // Redux operations and local helpers/utils/modules 17 | 18 | // Component specific modules (Component-styled, etc.) 19 | import { StyledCloseButton } from './Toaster-styled'; 20 | 21 | // App components 22 | import XIcon from 'calcite-ui-icons-react/XIcon'; 23 | 24 | // Third-party components (buttons, icons, etc.) 25 | import { ToastContainer as ToasterContainer } from 'react-toastify'; 26 | 27 | // JSON 28 | 29 | // CSS 30 | 31 | const ToastContainer = ({ ...other }) => { 32 | const CloseButton = ({ closeToast }) => ( 33 | } 37 | onClick={closeToast} 38 | /> 39 | ); 40 | 41 | return } {...other} />; 42 | }; 43 | 44 | ToastContainer.propTypes = { 45 | /* Toggle default visibility of the progress bar in a Toaster. */ 46 | showProgress: PropTypes.bool 47 | }; 48 | 49 | ToastContainer.defaultProps = {}; 50 | 51 | ToastContainer.displayName = 'ToastContainer'; 52 | 53 | export default ToastContainer; 54 | -------------------------------------------------------------------------------- /src/Toaster/doc/ToasterExampleComponent.js: -------------------------------------------------------------------------------- 1 | // Framework and third-party non-ui 2 | import React from 'react'; 3 | import styled from 'styled-components'; 4 | 5 | import Button from '../../Button'; 6 | import Tooltip from '../../Tooltip'; 7 | 8 | import InformationIcon from 'calcite-ui-icons-react/InformationIcon'; 9 | 10 | const StyledToasterExample = styled.div` 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | `; 15 | 16 | const ToasterExampleComponent = props => { 17 | return ( 18 | 19 | A Toaster Was Added 20 | 21 |