# Demio UI Kit Components & Resources --- ## Components > _Note:_ for usage examples, please check the `stories` folder. Run `yarn storybook` to launch a playground to test and develop. When creating a new component, it's ideal that you create a story file for it with a few different examples of its usage. ### Avatar (DemioAvatar) Component for displaying the user's gravatar based on their email. If they do not have a gravatar, we show a fallback UI. Has cacheing to optimize image loading. ### Box - Boxes - BoxButton Used in the Demio dashboard in the event overview customize section. Has a particular setup required, which you can see in those areas. Not something we will likely reuse in the future (so it could be moved to the demio repo later if we want). ### Button (DemioButton) Custom button component built off of Antd's Button component. Supports multiple styles, states, and icons via props. ### ColorPicker Based on `react-color`. Simple color picker component. ### CompanyIcon Displays the company icon that users set in their branding settings via the dashboard. Has a fallback UI. Uses similar cacheing to DemioAvatar ### CopyLinkButton A DemioButton with added functionality to copy some string to the clipboard onClick. ### CopyLinkInput Same as CopyLinkButton, but we show the string in an input, with the ability to copy it by clicking on the input or a small button with an icon next to it. ### CountDown Displays a countdown to the webinar start time. ### DemioCollapse A collapsable HOC that shows/hides the content within it. ### DemioDropDownArrow A wrapper around a DemioIcon that is mainly used to display the open/close status of the DemioCollapse container. Has simple props to smoothly style and rotate the icon. ### DemioInfo Component that displays some info. Can be a normal notice, a warning, an error, or a success notice. Also can have a call to action link that is automatically styled to the type of notice. ### DemioInput The new default input for Demio applications. Has typical input props and event listeners, along with an error state with a generic error message. ### DemioLoading Simple loading component with a few props for style changes. ### DemioPagination Small stateless pagination component used throughout Demio. Has typical pagination functionality and props. ### DemioSelect The new default select/dropdown component for Demio applications. Has a lot of custom functionality such as custom value and dropdown rendering, default value styling, and the ability to force the dropdown open via props. ### DemioTags A simple component consisting of an input to create and display tags, which are able to be deleted. ### DemioUpload One of the more complex components. Handles all user resource uploading functions in all Demio applications. Has drag and drop functionality, different states (uploading/uploaded/error), file previews, executable file checks, size limit checks, and others that can be helpful in validating files. ### Icon (DemioIcon) Imported as DemioIcon in all Demio applications, this is a component that we try to use for all future icons - moving away from font awesome and others. We put the SVG files in the `icons` folder (and often remove the fill props to allow for easy color changing via props), and then import and export them in the `icons.js` file, where they are finally imported into DemioIcon as a component (using `svgr/webpack` as an svg loader). From there we can easily control svg and most of its attributes via props. ### Loading This may be a legacy loading component. We're switching to DemioLoading, though this one may still be used. It would be helpful to do a full search of the dashboard and viewer code to see if this can be removed. ### RoleTag This is a super simple component to display the role of a Demio admin. You can pass the user's role even if they're an attendee. It will be hidden if they are not an admin. ### ScrollShadow This a component that can wrap any potentially overflowing container that should be scrollable. It will show a linear gradient at the top/bottom (vertical scroll) or left/right (horizontal scroll) to indicate that there is hidden content beyond it, and the user can scroll to it. Via props you can change the scroll direction, gradient color, size, and more. ### StandbyAnimation This is an old standby animation that we used in the viewer. It is likely able to be removed, but we should do some research in the repos first. ### Title This is also probably not used anywhere, but we need to do more research before removing. --- ## Resources - **icons folder**: Folder with DemioIcon svg files (see DemioIcon overview for more info) - **globals.less**: Global styles for demio-ui-kit components - Mostly to override antd styles - **helpers.js**: Helper functions for reuse in multiple components - **icons.js**: Where we import - **theme.js**: This is for Antd default styles - **vendors.less**: Style overrides for some 3rd party components