playbook_ui_docs 16.2.0 → 16.3.0.pre.alpha.PLAY2782RTEPOCs14847

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.md

@@ -0,0 +1 @@
+TipTap (vanilla JS) kit — no React. Same editor core as the React TipTap variant; content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_tiptap", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -11,6 +11,9 @@ examples:
   - rich_text_editor_inline: Inline
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
+  - rich_text_editor_tiptap_default: "TipTap (Vanilla JS)"
+  - rich_text_editor_quill_default: "Quill"
+  - rich_text_editor_lexxy_default: "Lexxy"
 
   react:
   - rich_text_editor_default: Default

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Snacks",
+  name: "food",
+  required_indicator: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Popcorn",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Chips",
+    },
+    {
+      value: "3",
+      value_text: "Twizzlers",
+    },
+    {
+      value: "4",
+      value_text: "Cookies",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Select } from "playbook-ui";
+
+const SelectRequiredIndicator = () => {
+  const options = [
+    {
+      value: "1",
+      text: "Popcorn",
+    },
+    {
+      value: "2",
+      text: "Chips",
+    },
+    {
+      value: "3",
+      text: "Twizzlers",
+    },
+  ];
+
+  return (
+    <div>
+      <Select
+          label="Favorite Snack"
+          name="food"
+          options={options}
+          requiredIndicator
+      />
+    </div>
+  );
+};
+
+export default SelectRequiredIndicator;

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -16,7 +16,7 @@ examples:
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
   - select_input_options: Input Options
-
+  - select_required_indicator: Required Indicator
 
 
   react:
@@ -35,8 +35,9 @@ examples:
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
   - select_input_options: Input Options
+  - select_required_indicator: Required Indicator
 
   swift:
   - select_default_swift: Default
   - select_error_swift: Error
-  - select_props_table: ""
+  - select_props_table: ""

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -13,3 +13,4 @@ export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
 export { default as SelectInputOptions } from './_select_input_options.jsx'
+export { default as SelectRequiredIndicator } from './_select_required_indicator.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+ // Mock Data for Table  
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+
+const TableWithFilterWithCardTitleProps = () => {
+  const [territory, setTerritory] = useState("")
+
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  
+  return (
+    <Table 
+        cardProps={{marginX: {
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    }}}
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        titleProps={{
+          paddingLeft:{
+            xs: "sm",
+            sm: "sm",
+            md: "xl",
+            lg: "xl",
+            xl: "xl",
+            default: "xl",
+          }
+        }}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterWithCardTitleProps

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md

@@ -0,0 +1,17 @@
+The `withFilter` variant also offers 2 additional optional props:
+
+`cardProps`: An object containing Card-specific props.
+`titleProps`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
+
+- `padding="none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
+
+- `size={3}`
+- `paddingY="md"`

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb

@@ -0,0 +1,121 @@
+    <% users = [
+        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
+        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
+        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
+        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
+        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
+        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
+        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
+        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
+        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
+    ] %>
+
+<% filter_content = 
+    pb_rails("text_input", props: {
+      label: "Territory ID",
+      placeholder: "Enter Territory ID"
+    }) +
+    pb_rails("typeahead", props: {
+      label: "Title",
+      options: [
+        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
+        { label: "UX Engineer", value: "ux-engineer" },
+        { label: "UX Designer", value: "ux-designer" }
+      ]
+    }) +
+    pb_rails("select", props: {
+      blank_selection: "All Departments",
+      label: "Department",
+      options: [
+        { value: "Business Technology", text: "Business Technology" },
+        { value: "Customer Development", text: "Customer Development" },
+        { value: "Talent Acquisition", text: "Talent Acquisition" }
+      ]
+    }) +
+    pb_rails("dropdown", props: {
+      label: "Branch",
+      options: [
+        { label: "Philadelphia", value: "philadelphia" },
+        { label: "New York", value: "new-york" },
+        { label: "Austin", value: "austin" }
+      ]
+    }) +
+    pb_rails("date_picker", props: {
+      label: "Start Date",
+      padding_y: "sm",
+      picker_id: "startedOn"
+    }) +
+    pb_rails("flex", props: { spacing: "between" }) do
+      pb_rails("button", props: {
+        text: "Filter",
+      }) +
+      pb_rails("button", props: {
+        text: "Defaults",
+        variant: "secondary"
+      })
+    end
+%>
+
+<%= pb_rails("table", props: {
+  card_props: {
+    margin_x: {
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  variant: "with_filter",
+  title: "Table Title Here",
+  title_props: {
+    padding_left:{
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  filter_content: filter_content,
+  filter_props: {
+    id: "user-table-filters-1",
+    results: 9,
+    sort_menu: [
+        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
+        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
+        { item: "Title", link: "?q[sorts]=title+asc", active: false },
+        { item: "Department", link: "?q[sorts]=department+asc", active: false },
+        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
+        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
+    ],
+  }
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
+           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md

@@ -0,0 +1,17 @@
+The `with_filter` variant also offers 2 additional optional props:
+
+`card_props`: An object containing Card-specific props.
+`title_props`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `card_props`):
+
+- `padding:"none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `title_props`):
+
+- `size:3`
+- `paddingY:"md"`

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -42,6 +42,7 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 
   react:
     - table_sm: Small
@@ -85,3 +86,4 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant: Variant with Filter
     - table_with_filter_variant_with_pagination: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -40,3 +40,4 @@ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_
 export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
 export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
 export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
+export { default as TableWithFilterWithCardTitleProps } from './_table_with_filter_with_card_title_props.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -2,19 +2,17 @@ import React from 'react'
 
 import TextInput from '../_text_input'
 
-class TextInputDisabled extends React.Component {
-  render(props) {
-    return (
-      <div>
-        <TextInput
-            disabled
-            label="Last Name"
-            placeholder="Enter last name"
-            {...props}
-        />
-      </div>
-    )
-  }
+const TextInputDisabled = (props) => {
+  return (
+    <div>
+      <TextInput
+          disabled
+          label="Last Name"
+          placeholder="Enter last name"
+          {...props}
+      />
+    </div>
+  )
 }
 
 export default TextInputDisabled

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("textarea", props: { label: "Disabled", rows: 4, id: "disabled-example-1", disabled: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: {
+  label: "Disabled with Placeholder",
+  placeholder: "Placeholder text",
+  id: "disabled-example-2",
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaDefault = (props) => {
+  return (
+    <>
+      <Textarea
+          disabled
+          id="disabled-example"
+          label="Disabled"
+          {...props}
+          rows={4}
+      />
+      <Textarea
+          disabled
+          id="disabled-example-with-placeholder"
+          label="Disabled with Placeholder"
+          placeholder="Content goes here"
+          {...props}
+          rows={4}
+      />
+    </>
+  )
+}
+
+export default TextareaDefault

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+
+import Textarea from "../_textarea"
+
+const TextareaInputOptions = (props) => {
+  const [value1, setValue1] = useState("")
+  const [value2, setValue2] = useState("")
+  const [value3, setValue3] = useState("")
+  const [value4, setValue4] = useState("")
+
+  return (
+    <div>
+      <Textarea
+          id="container-id"
+          label="ID on Container"
+          name="comment"
+          onChange={(e) => setValue1(e.target.value)}
+          rows={4}
+          value={value1}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{ id: "textarea-id" }}
+          label="ID on Textarea via inputOptions"
+          name="comment"
+          onChange={(e) => setValue2(e.target.value)}
+          rows={4}
+          value={value2}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          id="container-id-2"
+          inputOptions={{ id: "textarea-id-2" }}
+          label="Both Container and Textarea IDs"
+          name="comment"
+          onChange={(e) => setValue3(e.target.value)}
+          rows={4}
+          value={value3}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{
+          "aria-label": "Enter description",
+          "aria-describedby": "help-text",
+          data: { controller: "textarea", action: "focus->handleFocus" },
+          id: "description-textarea"
+        }}
+          label="Data and ARIA Attributes"
+          name="description"
+          onChange={(e) => setValue4(e.target.value)}
+          rows={4}
+          value={value4}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInputOptions

data/app/pb_kits/playbook/pb_textarea/docs/example.yml

@@ -10,6 +10,7 @@ examples:
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
   - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   react:
   - textarea_default: Default
@@ -20,6 +21,8 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   swift:
   - textarea_default_swift: Default

data/app/pb_kits/playbook/pb_textarea/docs/index.js

@@ -1,8 +1,10 @@
-export { default as TextareaDefault } from './_textarea_default.jsx'
-export { default as TextareaResize } from './_textarea_resize.jsx'
-export { default as TextareaCustom } from './_textarea_custom.jsx'
-export { default as TextareaError } from './_textarea_error.jsx'
-export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
-export { default as TextareaInline } from './_textarea_inline.jsx'
-export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
-export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'
+export { default as TextareaDefault } from "./_textarea_default.jsx"
+export { default as TextareaDisabled } from './_textarea_disabled.jsx'
+export { default as TextareaResize } from "./_textarea_resize.jsx"
+export { default as TextareaCustom } from "./_textarea_custom.jsx"
+export { default as TextareaError } from "./_textarea_error.jsx"
+export { default as TextareaCharacterCounter } from "./_textarea_character_counter.jsx"
+export { default as TextareaInline } from "./_textarea_inline.jsx"
+export { default as TextareaEmojiMask } from "./_textarea_emoji_mask.jsx"
+export { default as TextareaRequiredIndicator } from "./_textarea_required_indicator.jsx"
+export { default as TextareaInputOptions } from "./_textarea_input_options.jsx"

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -1,4 +1,6 @@
 <%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "light" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "lighter" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -9,6 +9,20 @@ const TitleColors = (props) => {
           text="Default Color"
           {...props}
       />
+      <Title
+          color="light"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="lighter"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
       <Title
           color="link"
           size={3}