Brand

src/components/brand/Brand.jsx

<Brand />

<Brand />

Icons

Icon

src/components/icons/Icon.jsx

Still a little janky, need prop to pass color and a few size variations.

After we write an auto-sizing algorithm or swap the library you won't need to pass viewbox_x or viewbox_y

Use name and fill properties to pass what you want.

<Icon name="additional" fill="black" size={64} viewbox_x={32} viewbox_y={32}/>
<Icon name="dash" fill="red" size={48}/>
<Icon name="download" fill="#696969" size={32}/>
<Icon name="edit" fill="orange" viewbox_x={20} viewbox_y={18}/>
<Icon name="expand" fill="purple"/>
<Icon name="filter" fill="limegreen"/>
<Icon name="link"/>
<Icon name="list"/>
<Icon name="logic"/>
<Icon name="pin" size={32}/>
<Icon name="search" size={128} viewbox_x={14} viewbox_y={14}/>
<Icon name="status"/>
<Icon name="trash"/>
<Icon name="user"/>
<Icon name="idropdown"/>
<Icon name="info"/>
<Icon name="ex"/>

<Icon name="additional" fill="black" size={64} viewbox_x={32} viewbox_y={32}/>
<Icon name="dash" fill="red" size={48}/>
<Icon name="download" fill="#696969" size={32}/>
<Icon name="edit" fill="orange" viewbox_x={20} viewbox_y={18}/>
<Icon name="expand" fill="purple"/>
<Icon name="filter" fill="limegreen"/>
<Icon name="link"/>
<Icon name="list"/>
<Icon name="logic"/>
<Icon name="pin" size={32}/>
<Icon name="search" size={128} viewbox_x={14} viewbox_y={14}/>
<Icon name="status"/>
<Icon name="trash"/>
<Icon name="user"/>
<Icon name="idropdown"/>
<Icon name="info"/>
<Icon name="ex"/>

Primitives

Badge

src/components/primitives/Badge.jsx

The badge is a label used in multiple patterns

input-output table labels

<Badge variant="blue">T</Badge>
<Badge variant="lightblue">B</Badge>
<Badge variant="grayblue">F</Badge>

<Badge variant="blue">T</Badge>
<Badge variant="lightblue">B</Badge>
<Badge variant="grayblue">F</Badge>

Suggestion

Capacity

<Badge variant="suggestion">Capacity</Badge>

<Badge variant="suggestion">Capacity</Badge>

Kind of rule

Draft

<Badge>Draft</Badge>

<Badge>Draft</Badge>

Button

src/components/primitives/Button.jsx

A button.

Form Button

<Button>Push me</Button>

<Button>Push me</Button>

Disabled buttons:

<Button disabled>Try again</Button>

<Button disabled>Try again</Button>

Wide button

<Button variant="wide">
  Click me
</Button>

<Button variant="wide">
  Click me
</Button>

src/components/primitives/Dropdown.jsx

This dropdown primitive is extended in patterns. See the various forms for examples of how arguments are passed to create <option> children.

<Dropdown>
  <option>dog</option>
  <option>cat</option>
</Dropdown>

<Dropdown>
  <option>dog</option>
  <option>cat</option>
</Dropdown>

Input

src/components/primitives/Input.jsx

Input field. Default is text input.

<Input type="text" />

<Input type="text" />

The range input requires variant="secondary" in addition to type="range"

<Input variant="secondary" type="range" />

<Input variant="secondary" type="range" />

<Input variant="secondary" type="range" value={90} disabled={true} />

<Input variant="secondary" type="range" value={90} disabled={true} />

Modal is a helper component used in patterns when an element needs to be toggled between visible and hidden. It can be utilized in the following way:
function componentName() { const [isOpen, setIsOpen] = React.useState(false); return (<Modal isOpen={isOpen}><content /></Modal>)}

Hello World

<Modal><Text>Hello World</Text></Modal>

<Modal isOpen><Text>Hello World</Text></Modal>

<Modal><Text>Hello World</Text></Modal>

<Modal isOpen><Text>Hello World</Text></Modal>

Rule

src/components/primitives/Rule.jsx

<Rule />

<Rule />

Text

src/components/primitives/Text.jsx

A component to render all text in the app.

Text treatments

Heading

Subtitle

Section title

Form title

Body text

Instruction text

Error text

<Text variant="heading">Heading</Text>
<Text variant="subtitle">Subtitle</Text>
<Text variant="sectiontitle">Section title</Text>
<Text variant="formtitle">Form title</Text>
<Text variant="body">Body text</Text>
<Text color="primary">Instruction text</Text>
<Text variant="error">Error text</Text>

<Text variant="heading">Heading</Text>
<Text variant="subtitle">Subtitle</Text>
<Text variant="sectiontitle">Section title</Text>
<Text variant="formtitle">Form title</Text>
<Text variant="body">Body text</Text>
<Text color="primary">Instruction text</Text>
<Text variant="error">Error text</Text>

Patterns

Addbutton

src/components/patterns/Addbutton.jsx

<Addbutton />

<Addbutton />

Card

src/components/patterns/Card.jsx

Loi concernant la taxe sur les carburants

<Card />

<Card />

ColumnLabel

src/components/patterns/ColumnLabel.jsx

<ColumnLabel rowLabel="B"/>

<ColumnLabel rowLabel="B"/>

EditorControl

src/components/patterns/EditorControl.jsx

Draft

<EditorControl />

<EditorControl />

EditorSection

src/components/patterns/EditorSection.jsx

<EditorSection title="Section Name"/>

<EditorSection title="Section Name"/>

FormDropdown

src/components/patterns/FormDropdown.jsx

hello world

<FormDropdown
  name="hello world"
  description="hello world is asking the following things"
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
/>

<FormDropdown
  name="hello world"
  description="hello world is asking the following things"
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
/>

FormDropdownDouble

src/components/patterns/FormDropdownDouble.jsx

hello world

<FormDropdownDouble
  name="hello world"
  description="hello world is asking the following things"
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
  nameTwo="hello world"
  descriptionTwo="hello world is asking the following things"
  optionsTwo={[
    { valueTwo: 'justice', labelTwo: 'Justice' },
    { valueTwo: 'peace', labelTwo: 'Peace' },
    { valueTwo: 'no justice', labelTwo: 'No Justice' },
    { valueTwo: 'no peace', labelTwo: 'No Peace' },
  ]}
/>

<FormDropdownDouble
  name="hello world"
  description="hello world is asking the following things"
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
  nameTwo="hello world"
  descriptionTwo="hello world is asking the following things"
  optionsTwo={[
    { valueTwo: 'justice', labelTwo: 'Justice' },
    { valueTwo: 'peace', labelTwo: 'Peace' },
    { valueTwo: 'no justice', labelTwo: 'No Justice' },
    { valueTwo: 'no peace', labelTwo: 'No Peace' },
  ]}
/>

FormSlider

src/components/patterns/FormSlider.jsx

hello world

<FormSlider name="hello world" description="hello world is asking the following things" />

<FormSlider name="hello world" description="hello world is asking the following things" />

FormStandard

src/components/patterns/FormStandard.jsx

hello world

<FormStandard name="hello world" description="hello world is asking the following things" />

<FormStandard name="hello world" description="hello world is asking the following things" />

FormStandardDouble

src/components/patterns/FormStandardDouble.jsx

hello world

<FormStandardDouble
  name="hello world"
  description="hello world is asking the following things"
  nameTwo="hello world"
  descriptionTwo="hello world is asking the following things"
/>

<FormStandardDouble
  name="hello world"
  description="hello world is asking the following things"
  nameTwo="hello world"
  descriptionTwo="hello world is asking the following things"
/>

FormStandardDropdown

src/components/patterns/FormStandardDropdown.jsx

Text Input

Dropdown Input

<FormStandardDropdown
  name="Text Input"
  description="Text input description."
  nameTwo="Dropdown Input"
  descriptionTwo="Dropdown input description."
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
/>

<FormStandardDropdown
  name="Text Input"
  description="Text input description."
  nameTwo="Dropdown Input"
  descriptionTwo="Dropdown input description."
  options={[
    { value: 'justice', label: 'Justice' },
    { value: 'peace', label: 'Peace' },
    { value: 'no justice', label: 'No Justice' },
    { value: 'no peace', label: 'No Peace' },
  ]}
/>

FormStandardLabel

src/components/patterns/FormStandardLabel.jsx

hello world

ID Value

Vqp4nv8eGprI

<FormStandardLabel
  name="hello world"
  description="hello world is asking the following things"
  nameTwo="ID Value"
  descriptionTwo="hello world is asking the following things"
  value="Vqp4nv8eGprI"
/>

<FormStandardLabel
  name="hello world"
  description="hello world is asking the following things"
  nameTwo="ID Value"
  descriptionTwo="hello world is asking the following things"
  value="Vqp4nv8eGprI"
/>

FormTextArea

src/components/patterns/FormTextArea.jsx

<FormTextArea/>

<FormTextArea/>

Infobox

src/components/patterns/Infobox.jsx

Delivery is offered for standard or non-standard boxes when more than half full. Delivery is free when a standard box is more than half full and contains at least $100.00 of groceries. Delivery of all non-standard boxes is...

const content =
  'Delivery is offered for standard or non-standard boxes when more than half full. Delivery is free when a standard box is more than half full and contains at least $100.00 of groceries. Delivery of all non-standard boxes is...';

<Infobox content={content} />;

const content =
  'Delivery is offered for standard or non-standard boxes when more than half full. Delivery is free when a standard box is more than half full and contains at least $100.00 of groceries. Delivery of all non-standard boxes is...';

<Infobox content={content} />;

InputField

src/components/patterns/InputField.jsx

<InputField message="Adjective, Arithmetic expression, or Boolean Number"/>

<InputField message="Adjective, Arithmetic expression, or Boolean Number"/>

InputOutputRow

src/components/patterns/InputOutputRow.jsx

TypeError: Cannot read properties of undefined (reading 'participle')

<InputOutputRow />

<InputOutputRow />

InvolvedParty

src/components/patterns/InvolvedParty.jsx

Standard Role Name

Standard Industry Name

ISIC Industry Code

ISIC Industry Name

<InvolvedParty />

<InvolvedParty />

Search

src/components/patterns/Search.jsx

<Search />

<Search />

SectionDescription

src/components/patterns/SectionDescription.jsx

Any rule can be expressed in terms of its input conditions, and its output assertions. Please state each condition of this rule, and each assertion of this rule, as a simple factual sentence. Each sentence should be phrased in a manner that, in some particular circumstance, the sentence would logically be ‘true’ or ‘false’.

<SectionDescription>
  <Text>
    Any rule can be expressed in terms of its input conditions, and its output assertions. Please
    state each condition of this rule, and each assertion of this rule, as a simple factual
    sentence. Each sentence should be phrased in a manner that, in some particular circumstance, the
    sentence would logically be ‘true’ or ‘false’.
  </Text>
</SectionDescription>

<SectionDescription>
  <Text>
    Any rule can be expressed in terms of its input conditions, and its output assertions. Please
    state each condition of this rule, and each assertion of this rule, as a simple factual
    sentence. Each sentence should be phrased in a manner that, in some particular circumstance, the
    sentence would logically be ‘true’ or ‘false’.
  </Text>
</SectionDescription>

SentenceConstructor

src/components/patterns/SentenceConstructor.jsx

Requires content and updateContent props to function correctly.

Used to construct input/output sentences.

You won't be able to modify the fields within this styleguide, because the fields depend on a parent component's state and functions to update.

The

of the

lorem ipsum

The

Of the

<SentenceConstructor
  content={{
    a: 'Param A',
    b: 'Param B',
    c: 'Param C',
    d: '>',
    e: 'formula E',
  }}
  updateContent={(n) => {
    console.log(n);
  }}
/>

<SentenceConstructor
  content={{
    a: 'Param A',
    b: 'Param B',
    c: 'Param C',
    d: '>',
    e: 'formula E',
  }}
  updateContent={(n) => {
    console.log(n);
  }}
/>

SentenceDisplay

src/components/patterns/SentenceDisplay.jsx

Display an input/output sentence.

Displays the functional content of an input sentence. Passing functions for openSentenceEditor and removeSentence will bind those functions to the attached buttons. An index prop must be provided, indicating the position in the array of input sentences.

The

invoiced

order.subtotal

of the

input.order

20 USD

<SentenceDisplay
  participle="invoiced"
  attribute="order.subtotal"
  subject="input.order"
  operation=">="
  value="20 USD"
  index={3}
  openSentenceEditor={(i) => {
    alert(`Opening editor for sentence ${i}...`);
  }}
  removeSentence={(i) => {
    alert(`Removing sentence ${i}`);
  }}
/>

<SentenceDisplay
  participle="invoiced"
  attribute="order.subtotal"
  subject="input.order"
  operation=">="
  value="20 USD"
  index={3}
  openSentenceEditor={(i) => {
    alert(`Opening editor for sentence ${i}...`);
  }}
  removeSentence={(i) => {
    alert(`Removing sentence ${i}`);
  }}
/>

SentenceEditor

src/components/patterns/SentenceEditor.jsx

Used to construct input/output sentences.

You won't be able to modify the fields within this styleguide, because the fields depend on a parent component's state and functions to update.

TypeError: Cannot read properties of undefined (reading 'output_assertions')

<SentenceEditor />

<SentenceEditor />

TwoFieldModule

src/components/patterns/TwoFieldModule.jsx

test

<TwoFieldModule title="test" fielda="test" descriptiona="test" fieldb="test" descriptionb="test" />

<TwoFieldModule title="test" fielda="test" descriptiona="test" fieldb="test" descriptionb="test" />

Brand

Brand

Icons

Icon

Primitives

Badge

Button

Input

Link

Rule

Text

Patterns

Addbutton

Card

ColumnLabel

EditorControl

EditorSection

FormDropdown

FormDropdownDouble

FormSlider

FormStandard

FormStandardDouble

FormStandardDropdown

FormStandardLabel

FormTextArea

Infobox

InputField

InputOutputRow

InvolvedParty

Search

SectionDescription

SentenceConstructor

SentenceDisplay

SentenceEditor

TwoFieldModule

rm-components