Skip to content

Latest commit

 

History

History
241 lines (172 loc) · 4.9 KB

TEXT.md

File metadata and controls

241 lines (172 loc) · 4.9 KB
Raw

Special Text Components

./src/js/components/text/

Purpose

These are components that allow easier display special text elements with multiple parts to them like blockquotes and lists.

Important Items

  • blockquote.jsx
  • list.jsx
  • d-list.jsx

Blockquote - blockquote.jsx

Purpose

Displays a blockquote element, complete with source and citations if needed.

Props

quote

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - The quote content you want to display in the component. Takes text or inline elements that belong in a

  • Default - ''

quoteTheme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap text format class like 'text-red'
  • Default - ''

source

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - Whom or what did the quote come from? This is the place to put that info.
  • Default - ''

sourceTheme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap text format class like 'text-red'
  • Default - ''

cite

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - A subset of the source prop; this can display extra information like what book the quote was in or something like that.
  • Default - ''

citeTheme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap text format class like 'text-red'
  • Default - ''

pullRight

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Shows the quote justified to the right.
  • Default - false

Example

import Blockquote from './src/js/components/text/blockquote.jsx';

<Blockquote
  quote="It requires more courage to suffer than to die."
  quoteTheme="text-light-blue"
  source="Napoleon Bonaparte"
  sourceTheme="text-aqua"
  cite="Historical figure"
  citeTheme="text-muted"
  pullRight
/>

List - list.jsx

Purpose

To display <ul> and <ol> components and their contents.

Props

id

  • Required - false
  • Data Type - STRING
  • Functionality - If you want to give the list element a special id

theme

  • Required - false
  • Data Type - STRING
  • Functionality - If you want to apply special classes to the list, such as 'text-red' or things like that.

items

  • Required - false

  • Data Type - ARRAY

  • Functionality - An array that can take strings, objects, or <li> elements as content for the list.

  • Expected Data -

      [
    'A string to place in a LI element',
    <li>Your own preformatted <strong>LI</strong></li>,
    {
      theme: 'text-red',
      content: 'Content you want to place in a LI'
    },
    {
      theme: 'text-red',
      content: <span>Also does <em>elements</em></span>
    }
  ]

  • Default - []

ordered

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Makes the list an ordered list
  • Default - false

unstyle

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Takes away the styling for unordered lists
  • Default - false

inline

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Sets the list to an inline list.
  • Default - false

Example

import List from './src/js/components/text/list.jsx';

<List
  id="this-list"
  theme="text-green"
  items={[
    { content: 'Item 1', theme: 'text-aqua' },
    { content: <span>Item <strong>2</strong></span>, theme: 'text-light-blue' },
    { content: 'Item 3', theme: 'text-muted' }
  ]}
  ordered
/>

DList - d-list.jsx

Purpose

Displays a description/definition list and its contents.

Props

id

  • Required - false
  • Data Type - STRING
  • Functionality - If you want to give the list element a special id

theme

  • Required - false
  • Data Type - STRING
  • Functionality - If you want to apply special classes to the list, such as 'text-red' or things like that.

items

  • Required - false

  • Data Type - ARRAY

  • Functionality - An array that can take strings, objects, or <li> elements as content for the list.

  • Expected Data -

      [
    <dt>Your own preformatted DT</dt>,
    <dd>Your own preformatted DD</dd>,
    {
      theme: 'text-red',
      dt: 'Content you want to place in a DT'
    },
    {
      dd: <span>Content you want to display in a <em>DD</em> as well. <strong>DTs can also take elements.</strong></span>
    }
  ]

  • Default - []

horizontal

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Makes the list a horizontal one.
  • Default - false

Example

import DList from './src/js/components/text/d-list.jsx';

<DList
  id="test-dlist-1"
  theme="text-green"
  horizontal
  items={[
    <dt key="1">DT 1</dt>,
    <dd key="2">DD 1 - a definitive description</dd>,
    <dt key="3">DT 2</dt>,
    <dd key="4">DD 2 - a definitive description</dd>
  ]}
/>