{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/atoms/input/input-macros.njk" as input %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: ["/css/vendors/slds.min.css"],
  scriptVendors: [],
  scope: "s-input"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

A component based on the inpit provided in the Salesforce Lightning Design System:
https://www.lightningdesignsystem.com/components/input

We have no control over the HTML, so all the styling is being overwritten in the `slds-input-calendar` scope.

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

{{input.calendar("", {
  label: "Calendar input",
  name: "styleguide-calendar-example1",
  placeholder: "Calendar placeholder",
  icon: "icon-calendar"
})}}

{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{% set code %}

<div class="a-input s-slds-input-calendar">
	<label class="a-input__label"><!-- label --></label>
	<div class="a-input__container">
		<lightning-input class="a-input__field slds-form-element">
		</lightning-input>
	</div>
</div>


{% endset %}