railsui 3.1.5 → 3.2.0

data/app/views/railsui/themes/corgie/content/typography/_headings.html.erb

@@ -0,0 +1,88 @@
+<div id="typography-headings">
+  <%= render layout: example, locals: { heading: "Headings", section: "Typography" } do %>
+
+    <div class="mb-4">
+      <h1 class="h1">A quick brown fox jumps over <br />
+        the lazy dog.</h1>
+      <%= help_text do %>
+        <p>h1</p>
+      <% end %>
+    </div>
+
+    <div class="mb-4">
+      <h2 class="h2">A quick brown fox jumps over the lazy dog.</h2>
+      <%= help_text do %>
+        <p>h2</p>
+      <% end %>
+    </div>
+
+    <div class="mb-4">
+      <h3 class="h3">A quick brown fox jumps over the lazy dog.</h3>
+      <%= help_text do %>
+        <p>h3</p>
+      <% end %>
+    </div>
+
+    <div class="mb-4">
+      <h4 class="h4">A quick brown fox jumps over the lazy dog.</h4>
+      <%= help_text do %>
+        <p>h4</p>
+      <% end %>
+    </div>
+
+    <div class="mb-4">
+      <h5 class="h5">A quick brown fox jumps over the lazy dog.</h5>
+      <%= help_text do %>
+        <p>h5</p>
+      <% end %>
+    </div>
+
+    <div>
+      <h6 class="h6">A quick brown fox jumps over the lazy dog.</h6>
+      <%= help_text do %>
+        <p>h6</p>
+      <% end %>
+    </div>
+
+<% content_for :example do %>
+<%# snippet content :html %>
+<% content_for :html, flush: true do %>
+<h1 class="h1">A quick brown fox jumps over the lazy dog.</h1>
+<h2 class="h2">A quick brown fox jumps over the lazy dog.</h2>
+<h3 class="h3">A quick brown fox jumps over the lazy dog.</h3>
+<h4 class="h4">A quick brown fox jumps over the lazy dog.</h4>
+<h5 class="h5">A quick brown fox jumps over the lazy dog.</h5>
+<h6 class="h6">A quick brown fox jumps over the lazy dog.</h6>
+<% end %>
+<%# snippet content :erb %>
+<% content_for :erb, flush: true do %>
+<%%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "h1" %>
+<%%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "h2" %>
+<%%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "h3" %>
+<%%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "h4" %>
+<%%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "h5" %>
+<%%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "h6" %>
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>
+
+<%= divider %>
+
+<div id="typography-responsive" class="prose prose-netural dark:prose-invert max-w-full prose-headings:tracking-tight">
+<h3>Responsive heading design</h3>
+<p>Change heading sizes relative to viewports with Tailwind CSS responsive utilities.</p>
+
+<div class="not-prose">
+<% content_for :html, flush: true do %>
+  <h1 class="md:h1 h2">My sample title</h1>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+<%= render_snippet %>
+</div>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_inline_formatting.html.erb

@@ -0,0 +1,44 @@
+<div id="typography-inline-formatting">
+<%= render layout: example, locals: { heading: "Inline formatting", section: "Typography" } do %>
+
+<div class="text-neutral-800 dark:text-neutral-100 font-tiktok">
+  <p class="pb-1">You can use the mark tag to <mark>highlight</mark> text.</p>
+  <p class="pb-1"><del>This line of text is meant to be treated as deleted text.</del></p>
+  <p class="pb-1"><s>This line of text is meant to be treated as no longer accurate.</s></p>
+  <p class="pb-1"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+  <p class="pb-1"><u>This line of text will render as underlined.</u></p>
+  <p class="pb-1"><small>This line of text is meant to be treated as fine print.</small></p>
+  <p class="pb-1"><strong>This line rendered as bold text.</strong></p>
+  <p class="pb-1"><em>This line rendered as italicized text.</em></p>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined.</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<%%= tag.p "You can use the mark tag to #{tag.mark 'highlight'} text." %>
+<%%= tag.p tag.del "This line of text is meant to be treated as deleted text." %>
+<%%= tag.p tag.s "This line of text is meant to be treated as no longer accurate." %>
+<%%= tag.p tag.ins "This line of text is meant to be treated as an addition to the document." %>
+<%%= tag.p tag.u "This line of text will render as underlined." %>
+<%%= tag.p tag.small "This line of text is meant to be treated as fine print." %>
+<%%= tag.p tag.strong "This line rendered as bold text." %>
+<%%= tag.p tag.em "This line rendered as italicized text." %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_lead_paragraph.html.erb

@@ -0,0 +1,26 @@
+<div id="typography-lead-paragraph">
+<%= render layout: example, locals: { heading: "Lead paragraph", section: "Typography" } do %>
+
+<div class="text-lg text-neutral-700 tracking-normal mt-3 mb-6 dark:text-neutral-300 font-tiktok">
+  <p>This is a lead paragraph. It stands out from regular paragraphs.</p>
+</div>
+
+<% content_for :example, flush: true do %>
+  <%# .html %>
+  <% content_for :html, flush: true do %>
+<div class="text-lg text-neutral-700 tracking-normal mt-3 mb-6 dark:text-neutral-300">
+  <p>A lead paragraph stands out from regular paragraphs.</p>
+</div>
+  <% end %>
+
+  <%# .erb %>
+  <% content_for :erb, flush: true do %>
+<%%= tag.div class: "text-lg text-neutral-700 tracking-normal mt-3 mb-6 dark:text-neutral-300" do %>
+  <%%= tag.p "A lead paragraph stands out from regular paragraphs.", class: "lead" %>
+<%% end %>
+    <% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_lists.html.erb

@@ -0,0 +1,82 @@
+<div id="typography-lists">
+<%= render layout: example, locals: { heading: "Lists", section: "Typography" } do %>
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 font-tiktok">
+  <div>
+    <p class="text-sm text-neutral-600 mt-2 dark:text-neutral-400">Standard</p>
+    <ul class="list-disc font-tiktok">
+      <li>A quick brown</li>
+      <li>fox jumps over</li>
+      <li>the lazy dog</li>
+    </ul>
+  </div>
+
+  <div>
+    <p class="text-sm text-neutral-600 mt-2 dark:text-neutral-400">Unstyled</p>
+    <ul class="list-reset font-tiktok">
+      <li>A quick brown</li>
+      <li>fox jumps over</li>
+      <li>the lazy dog</li>
+    </ul>
+  </div>
+
+  <div>
+    <p class="text-sm text-neutral-600 mt-2 dark:text-neutral-400">Decimal</p>
+    <ol class="list-decimal font-tiktok">
+      <li>A quick brown</li>
+      <li>fox jumps over</li>
+      <li>the lazy dog</li>
+    </ol>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<ul class="list-disc">
+  <li>A quick brown</li>
+  <li>fox jumps over</li>
+  <li>the lazy dog</li>
+</ul>
+
+<!--Reset-->
+<ul class="list-reset">
+  <li>A quick brown</li>
+  <li>fox jumps over</li>
+  <li>the lazy dog</li>
+</ul>
+
+<!--Decimal-->
+<ol class="list-decimal">
+  <li>A quick brown</li>
+  <li>fox jumps over</li>
+  <li>the lazy dog</li>
+</ol>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!--Standard-->
+<%%= tag.ul class:"list-disc" do %>
+  <%%= tag.li "A quick brown" %>
+  <%%= tag.li "fox jumps over" %>
+  <%%= tag.li "the lazy dog" %>
+<%% end %>
+
+<!--reset-->
+<%%= tag.ul class:"list-reset" do %>
+  <%%= tag.li "A quick brown" %>
+  <%%= tag.li "fox jumps over" %>
+  <%%= tag.li "the lazy dog" %>
+<%% end %>
+
+<!--Decimal-->
+<%%= tag.ol class:"list-decimal" do %>
+  <%%= tag.li "A quick brown" %>
+  <%%= tag.li "fox jumps over" %>
+  <%%= tag.li "the lazy dog" %>
+<%% end %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/typography/_paragraphs.html.erb

@@ -0,0 +1,33 @@
+<div id="typography-paragraphs">
+<%= render layout: example, locals: { heading: "Paragraphs", section: "Typography" } do %>
+
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 prose prose-neutral dark:prose-invert max-w-full font-tiktok">
+  <div>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo nisi distinctio neque veniam aliquam debitis architecto quaerat. Temporibus, similique dolor quia voluptates maiores in placeat laborum deleniti ratione officiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure non velit dignissimos laudantium modi at, eum officiis ipsam, illo vitae omnis nam, ut nisi alias odio magni qui nostrum.</p>
+
+    <p>Id velit dolorum fugit, beatae unde sint saepe rerum impedit nihil deleniti recusandae quam amet nesciunt, eveniet maiores?</p>
+  </div>
+  <div>
+    <p>Id velit dolorum fugit, beatae unde sint saepe rerum impedit nihil deleniti recusandae quam amet nesciunt, eveniet maiores?</p>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo nisi distinctio neque veniam aliquam debitis architecto quaerat. Temporibus, similique dolor quia voluptates maiores in placeat laborum deleniti ratione officiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure non velit dignissimos laudantium modi at, eum officiis ipsam, illo vitae omnis nam, ut nisi alias odio magni qui nostrum.</p>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<%= content_for :html, flush: true do %>
+<div class="prose proze-neutral dark:prose-invert">
+  <p>Lorem ipsum...</p>
+</div>
+<% end %>
+
+<%= content_for :erb, flush: true do %>
+<%%= tag.div class: "prose prose-neutral dark:prose-invert" do %>
+  <%%= tag.p "Lorem ipsum" %>
+<%% end %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/forms/_action_text.html.erb

@@ -0,0 +1,54 @@
+<div id="form-rich-text">
+<%= render layout: example, locals: { heading: "Rich Text Editor", section: "ActionText" } do %>
+  <div class="prose prose-neutral dark:prose-invert max-w-full">
+    <p><%= link_to "Action Text", "https://guides.rubyonrails.org/action_text_overview.html", target: :_blank %> brings rich text content and editing to Rails. It includes the <%= link_to "Trix editor", "https://trix-editor.org/", target: :_blank %> that handles everything from formatting to links to quotes to lists to embedded images and galleries.</p>
+
+    <p>Use the custom ActionText editor design made exclusively for the <%= Railsui.config.theme.humanize %> theme.</p>
+  </div>
+
+<% content_for :head do %>
+
+  <script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
+<% end %>
+
+<div class="my-10">
+<%= render preview('neutral') do %>
+  <form class="font-tiktok" action="#">
+    <div class="form-group font-tiktok">
+      <input id="x" type="hidden" name="content">
+      <trix-editor input="x"></trix-editor>
+    </div>
+  </form>
+<% end %>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: message do |form| %>
+  <div class="form-group">
+    <%%= form.label :content, class: "form-label" %>
+    <%%= form.rich_text_area :content %>
+  </div>
+  <%%= form.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: message, builder: Railsui::FormBuilder do |form| %>
+  <%%= form.rich_text_area :content, label: "Content" %>
+  <%%= form.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: "erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_forms_switch_path, prev_text: "Switch", next_path: systems_forms_validation_path, next_text: "Validation") %>
+</div>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Rich Text Editor", "#form-rich-text" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/forms/_checkbox.html.erb

@@ -0,0 +1,60 @@
+<div id="forms-checkbox">
+<%= render layout: example, locals: { heading: "Base", section: "Checkbox" } do %>
+
+<%= render preview('neutral') do %>
+<div class="flex items-center gap-3 font-tiktok">
+  <input class="form-input-checkbox" type="checkbox" value="1" id="check_default">
+  <label for="check_default">
+    Default checkbox
+  </label>
+</div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="flex items-center gap-3">
+  <input class="form-input-checkbox" type="checkbox" value="1" id="check_default">
+  <label for="check_default">
+    Default checkbox
+  </label>
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<%%= tag.div class: "flex items-center gap-3" do %>
+  <%%= check_box_tag :check_default, nil, false, class: "form-input-checkbox" %>
+  <%%= label_tag :check_default, "Default checkbox" %>
+<%% end %>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <%% tag.div class: "flex items-center gap-3" do %>
+    <%%= f.check_box :check_default, class: "form-input-checkbox" %>
+    <%%= f.label :check_default, "Default checkbox" %>
+  <%% end %>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.check_box :check_default, label: "Default checkbox" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_forms_select_path, prev_text: "Select", next_path: systems_forms_radio_path, next_text: "Radio") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#input-group-with-label" %>
+  <% end %>
+<% end %>