wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes from jon

Browse source
This commit is contained in:
MinamiFunakoshiTR 2023-01-18 15:48:15 -06:00
parent 710c2942fa
commit 90adf799ac
6 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/@types/global.ts
View file

@ -9,7 +9,7 @@ export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider'
* A step in the Scroller component. * A step in the Scroller component.
*/ */
export interface ScrollerStep { export interface ScrollerStep {
altText: string; altText?: string;
/** /**
* A background component * A background component
* @required * @required

8
src/components/Scroller/Embedded/Foreground.svelte
View file

@ -13,7 +13,9 @@
<div class="empty-step-foreground step-{index + 1}"></div> <div class="empty-step-foreground step-{index + 1}"></div>
{#if typeof step.altText === 'string'} {#if typeof step.altText === 'string'}
<p class="background-alt-text visually-hidden">{step.altText}</p> <div class="background-alt-text visually-hidden">
{@html marked.parse(step.altText)}
</div>
{/if} {/if}
{:else if typeof step.foreground === 'string'} {:else if typeof step.foreground === 'string'}
<Block cls="body-text step-{index + 1}"> <Block cls="body-text step-{index + 1}">
@ -22,7 +24,9 @@
</div> </div>
{#if typeof step.altText === 'string'} {#if typeof step.altText === 'string'}
<p class="background-alt-text visually-hidden">{step.altText}</p> <div class="background-alt-text visually-hidden">
{@html marked.parse(step.altText)}
</div>
{/if} {/if}
</Block> </Block>
{:else} {:else}

8
src/components/Scroller/Foreground.svelte
View file

@ -12,7 +12,9 @@
<!-- Empty foreground --> <!-- Empty foreground -->
<div class="empty-step-foreground"></div> <div class="empty-step-foreground"></div>
{#if typeof step.altText === 'string'} {#if typeof step.altText === 'string'}
<p class="background-alt-text visually-hidden">{step.altText}</p> <div class="background-alt-text visually-hidden">
{@html marked.parse(step.altText)}
</div>
{/if} {/if}
{:else} {:else}
<div class="step-foreground"> <div class="step-foreground">
@ -26,7 +28,9 @@
{/if} {/if}
</div> </div>
{#if typeof step.altText === 'string'} {#if typeof step.altText === 'string'}
<p class="background-alt-text visually-hidden">{step.altText}</p> <div class="background-alt-text visually-hidden">
{@html marked.parse(step.altText)}
</div>
{/if} {/if}
{/if} {/if}
</div> </div>

2
src/components/Scroller/docProps.ts
View file

@ -1,7 +1,7 @@
import type { ComponentType } from 'svelte'; import type { ComponentType } from 'svelte';
interface BlockStep { interface BlockStep {
AltText: string; AltText?: string;
Background: string; Background: string;
Text: string; Text: string;
} }

4
src/components/Scroller/stories/docs/ai2svelte.md
View file

@ -52,19 +52,21 @@ Step1Text: #### Step 1
Lorem Ipsum Lorem Ipsum
:end :end
AltText1: A map showing the Upper West side in New York City. AltText1: A map showing the Upper West side in New York City.
:end
Step2Text: #### Step 2 Step2Text: #### Step 2
Lorem Ipsum Lorem Ipsum
:end :end
AltText2: The same map now highlights 98th Street. AltText2: The same map now highlights 98th Street.
:end
Step3Text: #### Step 3 Step3Text: #### Step 3
Lorem Ipsum Lorem Ipsum
:end :end
AltText3: The same map now highlights three locations near 98th Street where something particulary important happened. AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
:end
``` ```
```svelte ```svelte

6
src/components/Scroller/stories/docs/quickit.md
View file

@ -37,12 +37,16 @@ StackBackground: true
:end :end
AltText: A map showing the Upper West side in New York City. AltText: A map showing the Upper West side in New York City.
Can add paragraphs of alt text if you want to break up sentences.
:end
Background: AiMap2 Background: AiMap2
Text: #### Step 2 Text: #### Step 2
Lorem ipsum Lorem ipsum
:end :end
AltText: The same map now highlights 98th Street. AltText: The same map now highlights 98th Street.
:end
Background: AiMap3 Background: AiMap3
Text: #### Step 3 Text: #### Step 3
@ -50,7 +54,7 @@ StackBackground: true
Lorem ipsum Lorem ipsum
:end :end
AltText: The same map now highlights three locations near 98th Street where something particulary important happened. AltText: The same map now highlights three locations near 98th Street where something particulary important happened.
:end
[] []
``` ```