Change Details

=== User Story=== As a reader, I can see a speaker icon next to the IPA markup, that allows me to hear the pronunciation. == Considerations == - {T309412} == Component Specification == | Assets | Dimensions | | {F35385723} | {F35385725} | == Primary States == | State | UI | Description | Status | | Default | {F35385734} | See specs above. Quiet button-style with a smaller 16px icon to a better fit next to text on the page | {icon exclamation} | | Hover | {F35385771} | Light background on hover (#F8F9F, base90) – similar to “quiet button” OOUI | {icon exclamation} | | Active | {F35385775} | Quiet button becomes blue: background (#EAF3FF, Accent90) icon+label (#2A4B8D, Accent30) | {icon exclamation} | == Secondary States == | State | UI | Description | Status | | Loading | {F35385734} | See specs above | {icon exclamation} | | Error | {F35385734} | See specs above | {icon exclamation} | | Error hover | {F35385734} | See specs above | {icon exclamation} | | Error Reload | {F35385734} | See specs above | {icon exclamation} | == Resources == [[ https://www.figma.com/file/KcCsC6v1W6FqNLrLM3fC54/IPA-Audio-Renderer?node-id=338%3A2971 | Figma board ]]

=== User Story=== As a reader, I can see a speaker icon next to the IPA markup, that allows me to hear the pronunciation. == Considerations == - {T309412} == Component Specification == | Assets | Dimensions | | {F35385723} | {F35385725} | == Primary States == | State | UI | Description | Status | | Default | {F35385734} | See specs above. Quiet button-style with a smaller 16px icon to a better fit next to text on the page | {icon exclamation} | | Hover | {F35385771} | Light background on hover (#F8F9F, base90) – similar to “quiet button” OOUI | {icon exclamation} | | Active | {F35385775} | Quiet button becomes blue: background (#EAF3FF, Accent90) icon+label (#2A4B8D, Accent30) | {icon exclamation} | == Secondary States == | State | UI | Description | Status | | Loading | {F35385787} | After 2sec of waiting, circular progress indicator (#3366CC, Accent50) replaces the volume icon to indicate loading | {icon exclamation} | | Error | {F35385790} | OOUI VolumeOff icon (#B32424, Red30) on darker background (#EAECF0, Base80) | {icon exclamation} | | Error hover | {F35385793} | On hover, a popup describes the error and the button becomes Error Reload (see below) | {icon exclamation} | | Error Reload | {F35385797} | OOUI Reload icon (#3366CC, Accent50) replaces VolumeOff icon | {icon exclamation} | == Resources == [[ https://www.figma.com/file/KcCsC6v1W6FqNLrLM3fC54/IPA-Audio-Renderer?node-id=338%3A2971 | Figma board ]]

=== User Story=== As a reader, I can see a speaker icon next to the IPA markup, that allows me to hear the pronunciation. == Considerations == - {T309412} == Component Specification == | Assets | Dimensions | | {F35385723} | {F35385725} | == Primary States == | State | UI | Description | Status | | Default | {F35385734} | See specs above. Quiet button-style with a smaller 16px icon to a better fit next to text on the page | {icon exclamation} | | Hover | {F35385771} | Light background on hover (#F8F9F, base90) – similar to “quiet button” OOUI | {icon exclamation} | | Active | {F35385775} | Quiet button becomes blue: background (#EAF3FF, Accent90) icon+label (#2A4B8D, Accent30) | {icon exclamation} | == Secondary States == | State | UI | Description | Status | | Loading | {F3538573487} | See specs aboveAfter 2sec of waiting, circular progress indicator (#3366CC, Accent50) replaces the volume icon to indicate loading | {icon exclamation} | | Error | {F35385734} | See specs above90} | OOUI VolumeOff icon (#B32424, Red30) on darker background (#EAECF0, Base80) | {icon exclamation} | | Error hover | {F35385734} | See specs above93} | On hover, a popup describes the error and the button becomes Error Reload (see below) | {icon exclamation} | | Error Reload | {F35385734} | See specs above97} | OOUI Reload icon (#3366CC, Accent50) replaces VolumeOff icon | {icon exclamation} | == Resources == [[ https://www.figma.com/file/KcCsC6v1W6FqNLrLM3fC54/IPA-Audio-Renderer?node-id=338%3A2971 | Figma board ]]