<%
demo_configs = [
  {
    heading: "Accent",
    label: "Accent",
    style: "accent",
  },
  {
    heading: "Primary",
    label: "Primary",
    style: "primary",
  },
  {
    heading: "Secondary",
    label: "Secondary",
    style: "secondary",
  },
  {
    heading: "Danger",
    label: "Danger",
    style: "danger",
  }
]
%>

<h3>Standard Buttons</h3>

<% demo_configs.each do | config | %>
  <%= sage_component SageCardBlock, {} do %>
    <%= sage_component SageBadge, {
      color: "draft",
      value: config[:heading],
    } %>
  <% end %>

  <% [false, true].each do | disabled | %>
    <%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %>
      <%= sage_component SageButton, {
        value: "Button",
        style: config[:style],
        disabled: disabled,
      } %>

      <%= sage_component SageButton, {
        value: "Submit",
        style: config[:style],
        disabled: disabled,
        attributes: {
          type: "submit"
        }
      } %>

      <%= sage_component SageButton, {
        value: "Link",
        style: config[:style],
        attributes: {
          href: "#element-button"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Left icon",
        style: config[:style],
        icon: {
          style: "left",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Right icon",
        style: config[:style],
        icon: {
          style: "right",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Icon only",
        style: config[:style],
        icon: {
          style: "only",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        style: config[:style],
        disabled: disabled,
        custom_content_class: 'demo-custom-class',
      } do %>
        <strong>Custom</strong> <em>content</em>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h3>Subtle Buttons</h3>
<% demo_configs.each do | config | %>
  <%= sage_component SageCardBlock, {} do %>
    <%= sage_component SageBadge, {
      color: "draft",
      value: "Subtle #{config[:heading]}",
    } %>
  <% end %>

  <% [false, true].each do | disabled | %>
    <%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %>
      <%= sage_component SageButton, {
        value: "Button",
        style: config[:style],
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Link",
        style: config[:style],
        attributes: {
          href: "#element-button"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Left icon",
        style: config[:style],
        icon: {
          style: "left",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Right icon",
        style: config[:style],
        icon: {
          style: "right",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Icon only",
        style: config[:style],
        icon: {
          style: "only",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        style: config[:style],
        subtle: true,
        disabled: disabled
      } do %>
        <strong>Custom</strong> <em>content</em>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h3>Button Groups</h3>
<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align End",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "end" } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align Space-Between",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "space-between" } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Button + Link",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
  <%= sage_component SageLink, {
    url: "#",
    label: "Link",
    external: false,
    launch: false,
    help_link: false,
    remove_underline: true,
    show_label: true,
    style: "secondary"
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Link + Buttons - Align Space-Between",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "space-between" } do %>
  <%= sage_component SageLink, {
    url: "#",
    label: "Link",
    external: false,
    launch: false,
    help_link: false,
    remove_underline: true,
    show_label: true,
    style: "secondary"
  } %>
  <%= sage_component SageButtonGroup, { gap: :sm } do %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align End with top border",
  } %>
<% end %>

<%= sage_component SageButtonGroup, { gap: :sm, align: "end", borderTop: true } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<h3>Button Group Wrap</h3>
<%= md("
  When enabled, button groups are no longer restricted to a single row, allowing contents to wrap to multiple lines via `flex-wrap: wrap`. **Note: all button groups regardless of this attribute will wrap at breakpoints below `sm-min` to prevent horizontal scrolling on small screen devices.**
  Click the button below to toggle button group wrapping throughout the page, and resize your browser to view the resulting change.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Toggle button group wrap",
    style: "primary",
    icon: {
      style: "right",
      name: "menu-bordered"
    },
    attributes: {
      id: "button-group-wrap-example"
    }
  } %>
</div>

<h3>Disclosure Button</h3>
<%= md("
  The disclosure button is used mainly with menus and dropdown components, accompanied with a down caret icon.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Month",
    disclosure: true,
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h4>Disclosure Button with Icon</h4>
<%= md("
  The disclosure button allows for an icon affordance.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Add item",
    disclosure: true,
    icon: { name: "add", style: "left" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h4>Rich Text Editor Button</h4>
<%= md("
  The disclosure button allows for an icon affordance.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    css_classes: "sage-btn--rich-text",
    value: "Add item",
    icon: { name: "add", style: "only" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>
<h4>Rich Text Editor Disclosure Button</h4>
<%= md("
  The disclosure button allows for an icon affordance to exist with hidden text.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    css_classes: "sage-btn--rich-text",
    value: "Add item",
    disclosure: true,
    small: true,
    icon: { name: "add", style: "only" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h3>Loading State</h3>
<%= md("
  Displays a loading indicator in the button, such as when a button is used to submit a form. Including the `spinner_on_submit` property will activate the loading state, and place the corresponding text as the `aria-label`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Select to activate loading state",
    spinner_on_submit: "my aria label",
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "primary",
  } %>
</div>

<h3>Small Button</h3>
<%= md("
  Sets a subtle button to be smaller in `font-size` and `line-height`. Enable the `small` treatment by adding the attribute: `small: true`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Small button here",
    style: "primary",
    subtle: true,
    small: true
  } %>
</div>

<h3>Full Width</h3>
<%= md("
  Displays a button that takes up 100% of the width of its container. Enable the `full_width` treatment by adding the attribute: `full_width: true`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Full width button example",
    style: "primary",
    full_width: true
  } %>
</div>