ariadne_view_components 0.0.13 → 0.0.15

data/app/assets/javascripts/comment-component.d.ts

@@ -7,7 +7,6 @@ export default class CommentComponent extends Controller {
     SELECTED_TAB_CLASSES: string[];
     PUBLIC_BACKGROUND_COLOR: string;
     INTERNAL_BACKGROUND_COLOR: string;
-    connect(): void;
     toggleTab(): void;
-    toggleBackgrounds(tab: HTMLButtonElement): void;
+    toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean): void;
 }

data/app/assets/stylesheets/ariadne_view_components.css

@@ -4,3 +4,4 @@
 
 @import 'tooltip-component.css';
 @import 'prosemirror.css';
+@import 'dropdown.css';

data/app/assets/stylesheets/dropdown.css

@@ -0,0 +1,46 @@
+.ariadne__details-reset > summary {
+  list-style: none;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+}
+
+.ariadne__details-reset > summary:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.ariadne__details-reset > summary:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary.btn-primary:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+.ariadne__details-reset > summary.btn-primary:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary.btn-primary:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+.ariadne__details-reset > summary::before {
+  display: none;
+}
+
+.ariadne__details-reset > summary::-webkit-details-marker {
+  display: none;
+}

data/app/assets/stylesheets/tooltip-component.css

@@ -1,34 +1,34 @@
-.tooltip-arrow,
-.tooltip-arrow::before {
+.ariadne-tooltip-arrow,
+.ariadne-tooltip-arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
 }
 
-.tooltip-arrow {
+.ariadne-tooltip-arrow {
   visibility: hidden;
 }
 
-tooltip[data-tooltip-show] .tooltip-arrow::before {
+tooltip[data-tooltip-show] .ariadne-tooltip-arrow::before {
   visibility: visible;
   content: '';
   transform: rotate(45deg);
 }
 
-tooltip[data-popper-placement^='top'][data-tooltip-show] > .tooltip-arrow {
+tooltip[data-popper-placement^='top'][data-tooltip-show] > .ariadne-tooltip-arrow {
   bottom: -4px;
 }
 
-tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+tooltip[data-popper-placement^='bottom'] > .ariadne-tooltip-arrow {
   top: -4px;
 }
 
-tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+tooltip[data-popper-placement^='left'] > .ariadne-tooltip-arrow {
   right: -4px;
 }
 
-tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+tooltip[data-popper-placement^='right'] > .ariadne-tooltip-arrow {
   left: -4px;
 }
 

data/app/components/ariadne/ariadne-form-with.d.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+import { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form-with.js

@@ -0,0 +1,85 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return !field.disabled && !['file', 'reset', 'submit', 'button'].includes(field.type);
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.element.children).filter(node => {
+            const data = node.attributes.getNamedItem('data-ariadne-form-field');
+            if ((data === null || data === void 0 ? void 0 : data.value) === 'true')
+                return true;
+        });
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}

data/app/components/ariadne/ariadne-form.d.ts

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+import type { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    static targets: string[];
+    readonly formFieldTargets: [HTMLFormField];
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form.js

@@ -0,0 +1,84 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return (!field.disabled &&
+            !field.classList.contains('ProseMirror') &&
+            !['file', 'reset', 'submit', 'button'].includes(field.type));
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.formFieldTargets);
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}
+AriadneFormWith.targets = ['formField'];

data/app/components/ariadne/ariadne.d.ts

@@ -0,0 +1,2 @@
+import './tab-container-component';
+import './time-ago-component';

data/app/components/ariadne/ariadne.js

@@ -0,0 +1,16 @@
+import { Application } from '@hotwired/stimulus';
+import AriadneForm from './ariadne-form';
+import ClipboardCopyComponent from './clipboard-copy-component';
+import RichTextAreaComponent from './rich-text-area-component';
+import SlideoverComponent from './slideover-component';
+import TabNavComponent from './tab-nav-component';
+import TooltipComponent from './tooltip-component';
+import './tab-container-component';
+import './time-ago-component';
+const application = Application.start();
+application.register('clipboard-copy-component', ClipboardCopyComponent);
+application.register('ariadne-form', AriadneForm);
+application.register('rich-text-area-component', RichTextAreaComponent);
+application.register('slideover-component', SlideoverComponent);
+application.register('tab-nav-component', TabNavComponent);
+application.register('tooltip-component', TooltipComponent);

data/app/components/ariadne/ariadne.ts

@@ -3,7 +3,6 @@ import {Application} from '@hotwired/stimulus'
 import AriadneForm from './ariadne-form'
 
 import ClipboardCopyComponent from './clipboard-copy-component'
-import CommentComponent from './comment-component'
 import RichTextAreaComponent from './rich-text-area-component'
 import SlideoverComponent from './slideover-component'
 import TabNavComponent from './tab-nav-component'
@@ -16,7 +15,6 @@ const application = Application.start()
 
 application.register('clipboard-copy-component', ClipboardCopyComponent)
 application.register('ariadne-form', AriadneForm)
-application.register('comment-component', CommentComponent)
 application.register('rich-text-area-component', RichTextAreaComponent)
 application.register('slideover-component', SlideoverComponent)
 application.register('tab-nav-component', TabNavComponent)

data/app/components/ariadne/avatar_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `Avatar` can be used to represent users.
+  #
+  # - Use the default circle avatar for users, and the square shape
+  # for or any other non-human avatars.
+  # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
+  # - Set `size` to update the height and width of the `Avatar` in pixels.
+  # - To stack multiple avatars together, use <%= link_to_component(Ariadne::AvatarStackComponent) %>.
+  #
+  # @accessibility
+  #   Images should have text alternatives that describe the information or function represented.
+  #   If the avatar functions as a link, provide alt text that helps convey the function. For instance,
+  #   if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
+  #   rather than `@kittenuser`.
+  #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
+  class AvatarComponent < Ariadne::Component
+    DEFAULT_SIZE = 20
+    SMALL_THRESHOLD = 24
+
+    DEFAULT_SHAPE = :circle
+    SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
+
+    SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
+
+    DEFAULT_CLASSES = "ariadne-inline-block ariadne-rounded-full ariadne-ring-2 ariadne-ring-white"
+
+    # @example Default
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+    #
+    # @example Square
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
+    #
+    # @example Link
+    #   <%= render(Ariadne::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
+    #
+    # @example With size
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
+    #
+    # @param src [String] The source url of the avatar image.
+    # @param alt [String] Passed through to alt on img tag.
+    # @param size [Integer] <%= one_of(Ariadne::AvatarComponent::SIZE_OPTIONS) %>
+    # @param shape [Symbol] Shape of the avatar. <%= one_of(Ariadne::AvatarComponent::SHAPE_OPTIONS) %>
+    # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, classes: "", attributes: {})
+      @tag = :img
+      @href = href
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+      @attributes[:src] = src
+      @attributes[:alt] = alt
+      @attributes[:size] = fetch_or_raise(SIZE_OPTIONS, size)
+      @attributes[:height] = @attributes[:size]
+      @attributes[:width] = @attributes[:size]
+    end
+
+    def call
+      if @href
+        render(Ariadne::LinkComponent.new(href: @href, classes: @classes, attributes: @attributes)) do
+          render(Ariadne::BaseComponent.new(tag: @tag)) { content }
+        end
+      else
+        render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
+      end
+    end
+  end
+end

data/app/components/ariadne/avatar_stack_component.html.erb

@@ -0,0 +1,12 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%if tooltipped? %>
+    <%= tooltip.to_s %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <%= avatar %>
+    <% end %>
+  <% else %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <%= avatar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/avatar_stack_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `AvatarStack` to stack multiple avatars together.
+  class AvatarStackComponent < Ariadne::Component
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+    DEFAULT_BODY_TAG = :div
+    BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
+
+    # `Tooltip` that appears on mouse hover or keyboard focus over the stack.
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
+    renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, classes: "", attributes: {}|
+      raise ArgumentError, "Avatar stacks with a tooltip must have a unique `id` set." if @id.blank?
+
+      Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: :label, classes: classes, attributes: attributes)
+    }
+
+    # Required list of stacked avatars.
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_many :avatars, "Ariadne::AvatarComponent"
+
+    DEFAULT_CLASSES = "ariadne-flex ariadne--space-x-2 ariadne-overflow-hidden"
+
+    # @example Default
+    #   <%= render(Ariadne::AvatarStackComponent.new) do |c| %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #   <% end  %>
+    #
+    # @example Align right
+    #   <%= render(Ariadne::AvatarStackComponent.new(align: :right)) do |c| %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #   <% end  %>
+    #
+    # @param tag [Symbol] <%= one_of(Ariadne::AvatarStackComponent::TAG_OPTIONS) %>
+    # @param align [Symbol] <%= one_of(Ariadne::AvatarStackComponent::ALIGN_OPTIONS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @align = fetch_or_raise(ALIGN_OPTIONS, align)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+      @attributes[:id] ||= "avatar-stack-#{SecureRandom.hex(4)}"
+      @id = @attributes[:id]
+    end
+
+    def render?
+      avatars.any?
+    end
+
+    def tooltipped?
+      tooltip.present?
+    end
+  end
+end

data/app/components/ariadne/base_button.rb

@@ -8,7 +8,7 @@ module Ariadne
 
     DEFAULT_TYPE = :button
     TYPE_SUBMIT = :submit
-    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
+    VALID_TYPES = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
 
     SIZE_CLASS_MAPPINGS = {
       xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
@@ -20,6 +20,7 @@ module Ariadne
     VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
 
     DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_NUDE_CLASSES = "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
 
     DEFAULT_SIZE = :md
 
@@ -31,7 +32,7 @@ module Ariadne
     #   <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
     #
     # @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
     # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
@@ -46,14 +47,22 @@ module Ariadne
       @tag = fetch_or_raise(TAG_OPTIONS, tag)
       @size = fetch_or_raise(VALID_SIZES, size)
 
-      @attributes[:type] = fetch_or_raise(TYPE_OPTIONS, type) if button?
-      @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      if button?
+        @attributes[:type] = fetch_or_raise(VALID_TYPES, type)
+        @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      else
+        @classes = class_names(DEFAULT_NUDE_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      end
     end
 
     def call
       render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
     end
 
+    private def link?(type)
+      type == :link
+    end
+
     private def button?
       @tag == :button
     end

data/app/components/ariadne/blankslate_component.rb

@@ -50,7 +50,7 @@ module Ariadne
     # @param tag [Symbol, String]  <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
-    DEFAULT_HEADING_CLASSES = "text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
+    DEFAULT_HEADING_CLASSES = "ariadne-text-3xl ariadne-font-extrabold ariadne-tracking-tight ariadne-text-gray-900 sm:ariadne-text-4xl"
     renders_one :heading, lambda { |tag: :h1, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_HEADING_CLASSES, classes)
 
@@ -107,7 +107,7 @@ module Ariadne
 
     # @example Basic
     #   <%= render Ariadne::BlankslateComponent.new do |c| %>
-    #     <% c.heading(tag: :h2).with_content("heading") %>
+    #     <% c.heading(tag: :h2) { "heading" } %>
     #     <% c.description { "Description"} %>
     #   <% end %>
     #
@@ -117,7 +117,7 @@ module Ariadne
     #   @code
     #     <%= render Ariadne::BlankslateComponent.new do |c| %>
     #       <% c.icon(icon: :"globe-europe-africa") %>
-    #       <% c.heading(tag: :h2).with_content("heading") %>
+    #       <% c.heading(tag: :h2) { "heading" } %>
     #       <% c.description { "Description"} %>
     #     <% end %>
     #
@@ -127,7 +127,7 @@ module Ariadne
     #   @code
     #     <%= render Ariadne::BlankslateComponent.new do |c| %>
     #       <% c.image(src: "https://github.githubassets.com/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
-    #       <% c.heading(tag: :h2).with_content("heading") %>
+    #       <% c.heading(tag: :h2){ "heading" } %>
     #     <% end %>
     #
     # @param tag [Symbol, String] The rendered tag name

data/app/components/ariadne/body_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   # Add additional usage considerations or best practices that may aid the user to use the component correctly.
   # @accessibility Add any accessibility considerations
   class BodyComponent < Ariadne::Component
-    DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col ariadne-min-h-screen"
+    DEFAULT_CLASSES = "ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
 
     # @example Default
     #

data/app/components/ariadne/button_component.html.erb

@@ -1,4 +1,4 @@
 <%= render Ariadne::BaseButton.new(tag: @tag, type: @type, classes: @classes, attributes: @attributes) do -%>
-  <%= icon %><%= trimmed_content %><%= counter %>
+  <%= icon %><%= trimmed_content %><%= counter %><%= ariadne_heroicon(icon: :"chevron-down", variant: HeroiconsHelper::Icon::VARIANT_MINI, classes: "ariadne-ml-2 ariadne--mr-1") if dropdown? %>
   <%= tooltip %>
 <% end -%>