@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.18 → 0.0.0-pr624.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,23 +17,85 @@ The `<auro-datepicker>` element should be used in situations where users may:
17
17
 
18
18
  ## Examples
19
19
 
20
- ### Emphasized layout
20
+ ### Snowflake layout
21
21
 
22
+ #### Single date
23
+ <div class="exampleWrapper--ondark" style="width: 306px">
24
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
25
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
26
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
27
+ <span slot="label">Date</span>
28
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
29
+ <span slot="fromLabel">Choose a date</span>
30
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
31
+ </auro-datepicker>
32
+ <!-- AURO-GENERATED-CONTENT:END -->
33
+ </div>
22
34
  <div class="exampleWrapper--ondark">
23
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
24
- <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
25
- <auro-datepicker style="width: 306px" layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark.html) -->
36
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark.html -->
37
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
38
+ <span slot="label">Date</span>
26
39
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
27
40
  <span slot="fromLabel">Choose a date</span>
28
41
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
29
- </auro-datepicker>
30
- <auro-datepicker disabled="" range style="width: 306px" layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
42
+ </auro-datepicker>
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
+ </div>
45
+ <auro-accordion alignRight>
46
+ <span slot="trigger">See code</span>
47
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/ondark.html) -->
48
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/ondark.html -->
49
+
50
+ ```html
51
+ <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
52
+ <span slot="label">Date</span>
53
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
54
+ <span slot="fromLabel">Choose a date</span>
55
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
56
+ </auro-datepicker>
57
+ ```
58
+ <!-- AURO-GENERATED-CONTENT:END -->
59
+ </auro-accordion>
60
+
61
+ #### Range
62
+ <div class="exampleWrapper--ondark" style="width: 306px">
63
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
64
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
65
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
66
+ <span slot="label">Dates</span>
67
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
68
+ <span slot="fromLabel">Choose a date</span>
69
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
70
+ </auro-datepicker>
71
+ <!-- AURO-GENERATED-CONTENT:END -->
72
+ </div>
73
+ <div class="exampleWrapper--ondark">
74
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
75
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
76
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
77
+ <span slot="label">Dates</span>
31
78
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
32
79
  <span slot="fromLabel">Choose a date</span>
33
80
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
34
81
  </auro-datepicker>
35
82
  <!-- AURO-GENERATED-CONTENT:END -->
36
83
  </div>
84
+ <auro-accordion alignRight>
85
+ <span slot="trigger">See code</span>
86
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/ondark-range.html) -->
87
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
88
+
89
+ ```html
90
+ <auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD">
91
+ <span slot="label">Dates</span>
92
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
93
+ <span slot="fromLabel">Choose a date</span>
94
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
95
+ </auro-datepicker>
96
+ ```
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </auro-accordion>
37
99
 
38
100
  ### Basic
39
101