@redsift/design-system NPM

Design System

A Design System for Red Sift Applications, based on redsift/ui-kit and Google's Material UI Design ideals. Built together by Red Sift Designers and Front End Developers. https://redsift.github.io/design-system/

Philosophy

Accessible
- Support for keyboard navigation and screen-readers by using semantic html. See https://web.dev/accessible
Responsive
Flexible
- Needs to work across every application and it's different unique styles
- Needs to be completely customisable and overridable for special cases
- App 'themes' to be configured within the App, rather than by the library
Universally Consistent
- Source of truth for the whole Red Sift Team
- Needs to unify the design across every application
- Inline with the Redsift Style Guide
Easy to install, update and use
- Keep it simple
- Enable building things quickly
- Properties are kept to a minimum
- All components should have thorough unit tests
Uses modern technologies
- Styled Components
- React Hooks

Use Tips:

Setup

The reccommended setup would be to import these components into the relevant app in a 'components/common' file, apply any customisations the specific app requires, and then import them from there into your components. Fonts should be imported by adding @import '../../node_modules/@redsift/design-system/dist/style.css';

Using the components: Import using import { Button } from '@redsift/design-system'

NOTE: Using Server Side Rendering: Components must be imported using import Button from '@redsift/design-system/dist/Component/Button/Button';

Customisation

Where customisation is required, the first option would be to use the builtin properties. If a relevant property doesn't exist, the recommendation is to use styled-components, i.e. CustomButton = styled(Button), you may also use classes and inline styles although it is not preferred by the style guide.

Colors

We recommend each app defines it's own colors and saves these as variables for passing to your components. So that you don't require to set the colors every time you use the component across the app, we suggest using a 'common' folder. For example, for using Button:

import { Button } from '@redsift/design-system'; const StyledButton = props => { const { white, danger, outlined, flat } = props; let color = '#33BB22'; let hoverColor = '#2b961d'; if (white || danger) { return <Button {...props} />; } if (outlined || flat) { hoverColor = 'rgba(51, 187, 34, 0.1)'; }
return <Button color={color} hoverColor={hoverColor} {...props} />; };
export default StyledButton;

Component Colors can be defined by:

For buttons, defining danger/white: <Button danger>
passing standard css supported values: <Button color='red' hoverColor='#CCC'>

Utils

Custom Hook: useToggle
Custom Hook: useIsMobile
Custom Hook: useFetch

To Dos

High Priority

Tables (WIP)
Select / Dropdown

Other

Icons
Input (outlined version)
Links
Loaders
Modals / Dialogs
Notifications (i.e. Toasts / Snackbars)
Pickers
Progress Bar
Tooltips

@react-aria/focus @react-aria/i18n @react-aria/interactions @react-aria/ssr @react-spring/web classnames

@infinitebrahmanuniverse/nolb-_reds @everything-registry/sub-chunk-771 @zalastax/nolb-_red @redsift/pickers

3 days ago

3 days ago

3 days ago

7 days ago

7 days ago

8 days ago

8 days ago

10 days ago

10 days ago

17 days ago

17 days ago

18 days ago

18 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

5 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

5.0.1-ellipsis-beta.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.0.7-table-small-devices-display

3 years ago

3.0.7-table-small-devices-improvements

3 years ago

3.0.7-table-mobile-update

3 years ago

3.0.7-gh-test-1

3 years ago

3.0.7-gh-test

3 years ago

3.0.4-simplebar-test.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.0.1-beta-sortable-list.5

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.0.1-beta-sortable-list.4

4 years ago

2.1.0

4 years ago

2.0.1

4 years ago

2.0.1-beta-disabled-opt-select.8

4 years ago

2.0.1-beta-disabled-opt-select.7

4 years ago

2.0.1-beta-disabled-opt-select.6

4 years ago

2.0.1-beta-disabled-opt-select.5

4 years ago

2.0.1-beta-disabled-opt-select.4

4 years ago

2.0.1-beta-disabled-opt-select.3

4 years ago

2.0.1-beta-disabled-opt-select.2

4 years ago

2.0.1-beta-disabled-opt-select.1

4 years ago

2.0.1-beta-sortable-list.3

4 years ago

2.0.1-beta-disabled-opt-select.0

4 years ago

2.0.1-beta-sortable-list.2

4 years ago

2.0.1-beta-sortable-list.1

4 years ago

2.0.1-beta-sortable-list.0

4 years ago

2.0.0

4 years ago

1.3.5

4 years ago

1.3.4

4 years ago

1.3.3-test-remove-simplebar

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.3.1-beta-tabs-title.0

4 years ago

1.3.1-tmp-tabs-title

4 years ago

1.3.0-tmp-fix-on-change-loop-3

4 years ago

1.3.0-tmp-fix-on-change-loop-2

4 years ago

1.3.0-tmp-fix-on-change-loop

4 years ago

1.3.0

4 years ago

1.2.4-beta-new-select

4 years ago

1.2.4-beta-minimal-select-4

4 years ago

1.2.4-beta-minimal-select-2

4 years ago

1.2.4-beta-minimal-select

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.1.86-beta-ip-surfacing.6

4 years ago

0.1.86-beta-ip-surfacing.5

4 years ago

0.1.86-beta-ip-surfacing.4

4 years ago

0.1.86-beta-ip-surfacing.3

4 years ago

0.1.86-beta-ip-surfacing.2

4 years ago

0.1.86-beta-ip-surfacing.1

4 years ago

0.1.86-beta-ip-surfacing.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago