Typography

Heading

If you need to add a color to any heading, just select your heading and add one of these classes :
<font-blue>, <font-green>, <font-white>, <font-red>, <font-yellow>

Interactive exemple

Paragraph

If you need to add a color to your paragraph, just select your paragraph and add one of these classes :
<font-blue>, <font-green>, <font-white>, <font-red>, <font-yellow>

Interactive exemple

Strong

Select the piece of paragraph needed and select "B"

Interactive exemple

Em

Select the piece of paragraph needed and select "I"

Interactive exemple

Highlight

Select the piece of paragraph needed and add the class <Highlight>

Interactive exemple

UL

Import this element from murray

Interactive exemple

OL

Import this element from murray

Interactive exemple

IL

Import this element from murray

Interactive exemple

Buttons & links

Buttons

Import this element from murray

Interactive exemple

Link

Import this element from murray

Interactive exemple

Spacer

The Spacer adds spacing between elements, given a size in baseline units (multiple of 12px). For add a spacer add the class <spacer> to an element

Interactive exemple

Container

To setup the container 2 options :

- Copy this element and delete the the classe <style>
- Add a div in you workspace and add the classe <container>

Using as a page root component
By default the Container takes 100% of the width until it reaches a certain size (different according to the current screen size), after which it will center its content with a set max-width. Here's a breakdown of the different sizes a non-fluid Container will take:

1. xl range (1200px -> Infinity): 1140px

Using in subcomponents (e.g. side modals)
The Container can be set to always take 100% of the parent width (only adding relevant margins) if used with the fluid prop.

Interactive exemple

Emoji

Import this element from murray. To change the icon, just click on the icon and change the image

Interactive exemple

Input

Import this element from murray. The Input component is used to render inputs, helping to respect the design system recommendations (sizes, spacing, etc).

Interactive exemple

Inline Input

Import this element from murray. The InlineInput component is used to render inputs inlined in text (in a <Paragraph>, <Heading>, <Input>'s label props, etc), helping to respect the design system recommendations (sizes, spacing, etc). It will behave like text contained in a <span>.

Interactive exemple

Radio Input

Import this element from murray. The RadioInput component is used to render radio inputs, helping to respect the design system recommendations (sizes, spacing, etc).

Interactive exemple

Text Area

Import this element from murray. The TextArea component is used to render inputs, helping to respect the design system recommendations (sizes, spacing, etc).

Interactive exemple

Select

Import this element from murray. The <select-field> component allows selecting a value from a list, with a look very close to the <Input> or <InlineInput> components.

Interactive exemple

Dropdown

Import this element from murray. The <Dropdown> component allows selecting a value from a list.

Interactive exemple

Form

Import this element from murray. The Form component is used to render stateful forms, helping to respect the design system recommendations (sizes, spacing, etc). This component helps you build a form and retrieve its values easily through a number of subcomponents.

Interactive exemple

Form Input

The Form.Input component is used to render an input in the context of <Form>, which allows creating & managing stateful forms.This component is a wrapper around Murray's <Input>, and automatically sets the value, onChange, error props.

Interactive exemple

Form TextArea

The Form.TextArea component is used to render a textarea in the context of <Form>, which allows creating & managing stateful forms.This component is a wrapper around Murray's <TextArea>, and automatically sets the value, onChange, error props.

Interactive exemple

Form Number Format

The Form.NumberFormat component is used to render a number only input in the context of <Form>.This component is a wrapper of react-number-format's <number-format> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Form Radio

The Form.Radio component is used to render a radio input in the context of <Form>.This component is a wrapper of Murray's <Input> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Form Checkbox

The Form.Radio component is used to render a radio input in the context of <Form>.This component is a wrapper of Murray's <Input> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Form Select

The Form.Select component is used to render a select input in the context of <Form>.This component is a wrapper of Murray's <Select> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Form MultiSelect

The Form.MultiSelect component is used to render a multi selection input in the context of <Form>.This component is a wrapper of Murray's <MultiSelect> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Form Inline

The Form.MultiSelect component is used to render a multi selection input in the context of <Form>.This component is a wrapper of Murray's <MultiSelect> component, which automatically sets the value, onChange, error props.`

Interactive exemple

Modals

Modal

The Modal component is used to conditionally render a fullscreen modal above the current page.

Interactive exemple

Sidebar Modal

The <sidebar-modal> component is used to conditionally render sidebar content above the current page.

Interactive exemple

Sidebar Modal Header

The <SidebarModal.Header> component is used to display a header in a sidebar modal, allowing to have a close/back button and a title.

Interactive exemple

To close the modal click me

Show the modal

The modal title

UseHideSidebar

Allows closing a sidebar modal.

Interactive exemple

UseShowModal

Allows closing a fullscreen modal.

Interactive exemple

Show the modal

Prefabs

NavList

The <NavList> component provides a UI to show clickable navigation items. Can be used to represent a tabs switcher.

Interactive exemple

Tab 1

Tab 2

I'm the first tab 1️⃣

I'm the second tab 2️⃣

List Header

<ListHeader> can be used to introduce a list of items (e.g. optical reimbursement in a coverage table).

Interactive exemple

Colored Message

The <ColoredMessage> component provides a way to emphasize content, usually to alert the user about important information.

Interactive exemple

Title of the message

Optional content

Dropdown Menu

The <DropdownMenu> component provides a UI to show clickable navigation or action items as a dropdown list.

Interactive exemple

Dropdown

Search Input

The SearchInput component is used to render an input visually pre-configured for search.

Interactive exemple

Video Background

The VideoBackground component is used to a section with a background video. Often used in landings to have a moving furry background.

Interactive exemple

Adding new components to Murray

Document owner: @antoine.jackson

Disclaimer: This is a first draft of things we need to ask ourselves before adding new Murray components.
Feel free to challenge it by opening a PR on this file.

‍Murray's goal is to reduce the effort needed to write consistent user interfaces, that respect our design principles.

To be added as part of Murray's API, a component should be:
- Discussed with the Design Community
Making sure it's compliant with our design principles, and that it's something we want to encourage others to use.
Usually, a component defined in the Murray library should have an equivalent in the Figma components page, and vice-versa.

- Simple and extensible
Murray components should be easy to use, and shouldn't need to be changed often to be used often.

Documented & self discoverable
Murray components should be documented in Storybook via an interactive page, that shows easily copy-pastable examples (for example see the <Button> docs).
Also, Murray components should be written in TypeScript so that their interface is easily discoverable from the IDE, via auto-completion.

To get a review on a new Murray component, please ask someone in @frontend_dev_experts in Slack, and ask your crew's referent Designer.

Note on shared components

When all you need is to share a component across apps, it's usually best to first put it in shared/common or shared/common-mobile rather than putting it in Murray by default.

Murray does provide a set of shared components, but its API needs to remain as clear as possible to facilitate its usage.

A component in shared/common or shared/common-mobile can later be "promoted" to Murray components, if it fits the requirements above, and helps improve the visual consistency.

Background Colors

Select your DIV and add any of these class :
<background-black>, <background-red>, <background-blue>, <background-green>, <background-white>,

Color Palette

Grey Shade