Skip to content

Commit

Permalink
feat: adding error status hbt
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvinLaubenstein @nowseemee
marvinLaubenstein authored and nowseemee committed Jul 19, 2021
1 parent 3f288c3 commit b6e2804
Showing 1 changed file with 384 additions and 0 deletions.
384 changes: 384 additions & 0 deletions packages/components-sketch/views/checkbox-group.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,9 +459,393 @@
</scale-checkbox-group>
</div>
</div>





<h2 class="title--artboard-section">Group Error - Group Selected Off</h2>
<div class="agent-states--grid">
<div class="agent-states--item">
<p class="agent-states--label">:available</p>
<scale-checkbox-group data-sketch-key="checkbox-group-1" label="Checkbox Group Label">
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox"
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-2" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:hover</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox"
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-3" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:focus</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox"
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-4" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:pressed</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox"
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group>
</div>
</div>

<h2 class="title--artboard-section">Group Selected On</h2>
<div class="agent-states--grid">
<div class="agent-states--item">
<p class="agent-states--label">:available</p>
<scale-checkbox-group data-sketch-key="checkbox-group-6" label="Checkbox Group Label">
<div slot="checkbox-header">
<scale-checkbox
checked
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
checked
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:hover</p>
<scale-checkbox-group data-sketch-key="checkbox-group-7" label="Checkbox Group Label">
<div slot="checkbox-header">
<scale-checkbox
checked
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
checked
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-8" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:focus</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
checked
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
checked
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group>
</div>
<div class="agent-states--item">
<p class="agent-states--label">:pressed</p>
<scale-checkbox-group data-sketch-key="checkbox-group-9" label="Checkbox Group Label">
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
checked
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group>
</div>
</div>

<h2 class="title--artboard-section">Group intermediate</h2>
<div class="agent-states--grid">
<div class="agent-states--item">
<p class="agent-states--label">:available</p>
<scale-checkbox-group data-sketch-key="checkbox-group-11" label="Checkbox Group Label">
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-12" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:hover</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-13" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:focus</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group data-sketch-key="checkbox-group-14" label="Checkbox Group Label">
</div>
<div class="agent-states--item">
<p class="agent-states--label">:pressed</p>
<scale-checkbox-group>
<div slot="checkbox-header">
<scale-checkbox
status="error"
input-id="header-checkbox"
value="1"
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
>
</scale-checkbox>
</div>
<div slot="checkbox-list">
<div style="margin-top: 0.5rem">
<scale-checkbox
value="2"
label="checkbox"
name="nameOfCheckbox"
></scale-checkbox>
</div>
<div style="margin-top: 0.5rem">
<scale-checkbox value="3" name="nameOfCheckbox" checked
>Checkbox Slot</scale-checkbox
>
</div>
</div>
</scale-checkbox-group>
</div>
</div>
</div>



<script src="/symbol_names.js"></script>
<script>
Array.from(document.querySelectorAll("scale-checkbox-group")).forEach(btn => {
Expand Down

0 comments on commit b6e2804

Please sign in to comment.