@ndla/ui 37.1.2 → 37.1.4
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.
- package/es/AudioPlayer/Controls.js +68 -88
- package/es/List/OrderedList.js +1 -1
- package/es/List/UnOrderedList.js +1 -1
- package/lib/AudioPlayer/Controls.js +68 -88
- package/lib/List/OrderedList.js +1 -1
- package/lib/List/UnOrderedList.js +1 -1
- package/package.json +3 -2
- package/src/AudioPlayer/Controls.tsx +21 -33
- package/src/List/OrderedList.tsx +1 -1
- package/src/List/UnOrderedList.tsx +1 -1
package/lib/List/OrderedList.js
CHANGED
|
@@ -36,7 +36,7 @@ exports.generateListResets = generateListResets;
|
|
|
36
36
|
var StyledOl = /*#__PURE__*/(0, _base["default"])("ol", {
|
|
37
37
|
target: "e5qf6bq0",
|
|
38
38
|
label: "StyledOl"
|
|
39
|
-
})("margin-top:0;margin-left:", _core.spacing.normal, ";", _core.fonts.sizes('
|
|
39
|
+
})("margin-top:0;margin-left:", _core.spacing.normal, ";", _core.fonts.sizes('18px', '29px'), ";list-style-type:none;padding-left:", _core.spacing.medium, "!important;ol{padding-left:", _core.spacing.medium, ";margin-left:0;}li{margin-top:", _core.spacing.nsmall, ";p{margin-bottom:", _core.spacing.nsmall, "!important;}}&[data-type='letters']{counter-reset:item 0;>li{counter-increment:item;&:before{position:absolute;transform:translateX(-100%);content:counter(item, upper-alpha) '.';padding-right:", _core.spacing.nsmall, ";}>ol[data-type='letters']{>li:before{content:counter(item, lower-alpha) '.';}ol[data-type='letters']{>li:before{content:counter(item, lower-roman) '.';}}}}}&:not([data-type='letters']){counter-reset:item 0;>li{counter-increment:item;&:before{position:absolute;transform:translateX(-100%);content:counters(item, '.') '.';padding-right:", _core.spacing.nsmall, ";}>ol:not([data-type='letters']){>li{padding-left:", _core.spacing.nsmall, ";>ol:not([data-type='letters']){>li{padding-left:", _core.spacing.medium, ";>ol:not([data-type='letters']){>li{padding-left:", _core.spacing.large, ";}}}}}}}}", generateListResets(), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9yZGVyZWRMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjBCIiwiZmlsZSI6Ik9yZGVyZWRMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IGZvcndhcmRSZWYsIEhUTUxBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgY29uc3QgZ2VuZXJhdGVMaXN0UmVzZXRzID0gKCkgPT4ge1xuICBsZXQgc3R5bGVzID0gJyc7XG4gIGZvciAobGV0ICRpID0gMDsgJGkgPCA1MDsgJGkrKykge1xuICAgIHN0eWxlcyArPSBgIFxuICAgICAgb2wub2wtcmVzZXQtJHskaX0geyBjb3VudGVyLXJlc2V0OiBpdGVtICR7JGkgLSAxfSB9ICBcbiAgICBgO1xuICB9XG5cbiAgcmV0dXJuIHN0eWxlcztcbn07XG5cbmNvbnN0IFN0eWxlZE9sID0gc3R5bGVkLm9sYFxuICBtYXJnaW4tdG9wOiAwO1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLm5vcm1hbH07XG4gICR7Zm9udHMuc2l6ZXMoJzE4cHgnLCAnMjlweCcpfTtcbiAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5tZWRpdW19ICFpbXBvcnRhbnQ7XG5cbiAgLy8gQ2hpbGQgb3JkZXJlZCBsaXN0c1xuICBvbCB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcubWVkaXVtfTtcbiAgICBtYXJnaW4tbGVmdDogMDtcbiAgfVxuICAvLyBMaXN0IGl0ZW1cbiAgbGkge1xuICAgIG1hcmdpbi10b3A6ICR7c3BhY2luZy5uc21hbGx9O1xuXG4gICAgcCB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcubnNtYWxsfSAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxuXG4gICZbZGF0YS10eXBlPSdsZXR0ZXJzJ10ge1xuICAgIGNvdW50ZXItcmVzZXQ6IGl0ZW0gMDtcbiAgICA+IGxpIHtcbiAgICAgIGNvdW50ZXItaW5jcmVtZW50OiBpdGVtO1xuICAgICAgJjpiZWZvcmUge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMTAwJSk7XG4gICAgICAgIGNvbnRlbnQ6IGNvdW50ZXIoaXRlbSwgdXBwZXItYWxwaGEpICcuJztcbiAgICAgICAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5zbWFsbH07XG4gICAgICB9XG5cbiAgICAgID4gb2xbZGF0YS10eXBlPSdsZXR0ZXJzJ10ge1xuICAgICAgICA+IGxpOmJlZm9yZSB7XG4gICAgICAgICAgY29udGVudDogY291bnRlcihpdGVtLCBsb3dlci1hbHBoYSkgJy4nO1xuICAgICAgICB9XG4gICAgICAgIG9sW2RhdGEtdHlwZT0nbGV0dGVycyddIHtcbiAgICAgICAgICA+IGxpOmJlZm9yZSB7XG4gICAgICAgICAgICBjb250ZW50OiBjb3VudGVyKGl0ZW0sIGxvd2VyLXJvbWFuKSAnLic7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgJjpub3QoW2RhdGEtdHlwZT0nbGV0dGVycyddKSB7XG4gICAgY291bnRlci1yZXNldDogaXRlbSAwO1xuICAgID4gbGkge1xuICAgICAgY291bnRlci1pbmNyZW1lbnQ6IGl0ZW07XG4gICAgICAmOmJlZm9yZSB7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0xMDAlKTtcbiAgICAgICAgY29udGVudDogY291bnRlcnMoaXRlbSwgJy4nKSAnLic7XG4gICAgICAgIHBhZGRpbmctcmlnaHQ6ICR7c3BhY2luZy5uc21hbGx9O1xuICAgICAgfVxuXG4gICAgICA+IG9sOm5vdChbZGF0YS10eXBlPSdsZXR0ZXJzJ10pIHtcbiAgICAgICAgPiBsaSB7XG4gICAgICAgICAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcubnNtYWxsfTtcbiAgICAgICAgICA+IG9sOm5vdChbZGF0YS10eXBlPSdsZXR0ZXJzJ10pIHtcbiAgICAgICAgICAgID4gbGkge1xuICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5tZWRpdW19O1xuICAgICAgICAgICAgICA+IG9sOm5vdChbZGF0YS10eXBlPSdsZXR0ZXJzJ10pIHtcbiAgICAgICAgICAgICAgICA+IGxpIHtcbiAgICAgICAgICAgICAgICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLmxhcmdlfTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgLy8gTGlzdCByZXNldCBjbGFzc2VzXG4gICR7Z2VuZXJhdGVMaXN0UmVzZXRzKCl9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBIVE1MQXR0cmlidXRlczxIVE1MT0xpc3RFbGVtZW50PiB7XG4gIHR5cGU/OiAnbGV0dGVycyc7XG4gIHN0YXJ0PzogbnVtYmVyO1xufVxuXG5jb25zdCBPcmRlcmVkTGlzdCA9IGZvcndhcmRSZWY8SFRNTE9MaXN0RWxlbWVudCwgUHJvcHM+KCh7IHR5cGUsIGNoaWxkcmVuLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRPbCBkYXRhLXR5cGU9e3R5cGV9IHJlZj17cmVmfSB7Li4ucmVzdH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRPbD5cbiAgKTtcbn0pO1xuXG5leHBvcnQgZGVmYXVsdCBPcmRlcmVkTGlzdDtcbiJdfQ== */"));
|
|
40
40
|
var OrderedList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
41
41
|
var type = _ref.type,
|
|
42
42
|
children = _ref.children,
|
|
@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
29
29
|
var StyledUl = /*#__PURE__*/(0, _base["default"])("ul", {
|
|
30
30
|
target: "engrneb0",
|
|
31
31
|
label: "StyledUl"
|
|
32
|
-
})("padding-left:", _core.spacing.nsmall, "!important;margin-left:", _core.spacing.normal, "!important;margin-top:0;", _core.fonts.sizes('
|
|
32
|
+
})("padding-left:", _core.spacing.nsmall, "!important;margin-left:", _core.spacing.normal, "!important;margin-top:0;", _core.fonts.sizes('18px', '29px'), ";ul{list-style-image:none;padding-left:", _core.spacing.nsmall, ";margin-left:0!important;}>li{::marker{color:", _core.colors.brand.secondary, ";}}li{padding-left:", _core.spacing.nsmall, ";margin-top:", _core.spacing.nsmall, ";p{margin-bottom:", _core.spacing.nsmall, "!important;}}", (0, _OrderedList.generateListResets)(), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlVuT3JkZXJlZExpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWEwQiIsImZpbGUiOiJVbk9yZGVyZWRMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiwgSFRNTEF0dHJpYnV0ZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBnZW5lcmF0ZUxpc3RSZXNldHMgfSBmcm9tICcuL09yZGVyZWRMaXN0JztcblxuY29uc3QgU3R5bGVkVWwgPSBzdHlsZWQudWxgXG4gIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLm5zbWFsbH0gIWltcG9ydGFudDtcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9ICFpbXBvcnRhbnQ7XG4gIG1hcmdpbi10b3A6IDA7XG4gICR7Zm9udHMuc2l6ZXMoJzE4cHgnLCAnMjlweCcpfTtcblxuICB1bCB7XG4gICAgbGlzdC1zdHlsZS1pbWFnZTogbm9uZTtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5uc21hbGx9O1xuXG4gICAgbWFyZ2luLWxlZnQ6IDAgIWltcG9ydGFudDtcbiAgfVxuXG4gID4gbGkge1xuICAgIDo6bWFya2VyIHtcbiAgICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5zZWNvbmRhcnl9O1xuICAgIH1cbiAgfVxuICAvLyBMaXN0IGl0ZW1cbiAgbGkge1xuICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLm5zbWFsbH07XG4gICAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLm5zbWFsbH07XG4gICAgcCB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcubnNtYWxsfSAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxuXG4gIC8vIExpc3QgcmVzZXQgY2xhc3Nlc1xuICAke2dlbmVyYXRlTGlzdFJlc2V0cygpfVxuYDtcblxuY29uc3QgVW5PcmRlcmVkTGlzdCA9IGZvcndhcmRSZWY8SFRNTFVMaXN0RWxlbWVudCwgSFRNTEF0dHJpYnV0ZXM8SFRNTFVMaXN0RWxlbWVudD4+KCh7IGNoaWxkcmVuLCAuLi5yZXN0IH0sIHJlZikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRVbCByZWY9e3JlZn0gey4uLnJlc3R9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvU3R5bGVkVWw+XG4gICk7XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgVW5PcmRlcmVkTGlzdDtcbiJdfQ== */"));
|
|
33
33
|
var UnOrderedList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
34
34
|
var children = _ref.children,
|
|
35
35
|
rest = _objectWithoutProperties(_ref, _excluded);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "37.1.
|
|
3
|
+
"version": "37.1.4",
|
|
4
4
|
"description": "UI component library for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"types"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
+
"@headlessui/react": "^1.7.14",
|
|
34
35
|
"@ndla/accordion": "^2.2.3",
|
|
35
36
|
"@ndla/article-scripts": "^3.0.17",
|
|
36
37
|
"@ndla/button": "^10.1.2",
|
|
@@ -86,5 +87,5 @@
|
|
|
86
87
|
"publishConfig": {
|
|
87
88
|
"access": "public"
|
|
88
89
|
},
|
|
89
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "77675e3df78c7dd48d9790cdd1adfceab56e355e"
|
|
90
91
|
}
|
|
@@ -10,6 +10,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|
|
10
10
|
import styled from '@emotion/styled';
|
|
11
11
|
import { Menu, MenuButton, MenuItem, MenuPopover, MenuItems, MenuItemProps } from '@reach/menu-button';
|
|
12
12
|
import { SliderInput, SliderTrack, SliderRange, SliderHandle, SliderOrientation } from '@reach/slider';
|
|
13
|
+
import { Popover } from '@headlessui/react';
|
|
13
14
|
import { Play, Pause, VolumeUp } from '@ndla/icons/common';
|
|
14
15
|
import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
|
|
15
16
|
import { useTranslation } from 'react-i18next';
|
|
@@ -235,7 +236,7 @@ const ProgressHandle = styled(SliderHandle)`
|
|
|
235
236
|
top: -8px;
|
|
236
237
|
`;
|
|
237
238
|
|
|
238
|
-
const VolumeWrapper = styled
|
|
239
|
+
const VolumeWrapper = styled(Popover)`
|
|
239
240
|
position: relative;
|
|
240
241
|
display: flex;
|
|
241
242
|
justify-content: center;
|
|
@@ -256,7 +257,7 @@ const WardButtonWrapper = styled.div<{ order: number }>`
|
|
|
256
257
|
}
|
|
257
258
|
`;
|
|
258
259
|
|
|
259
|
-
const VolumeButton = styled(
|
|
260
|
+
const VolumeButton = styled(Popover.Button)`
|
|
260
261
|
background-color: inherit;
|
|
261
262
|
width: 48px;
|
|
262
263
|
height: 48px;
|
|
@@ -280,13 +281,10 @@ const VolumeButton = styled(MenuButton)`
|
|
|
280
281
|
}
|
|
281
282
|
`;
|
|
282
283
|
|
|
283
|
-
const
|
|
284
|
+
const VolumeList = styled(Popover.Panel)`
|
|
284
285
|
position: absolute;
|
|
285
286
|
bottom: 52px;
|
|
286
287
|
z-index: 99;
|
|
287
|
-
`;
|
|
288
|
-
|
|
289
|
-
const VolumeList = styled.div`
|
|
290
288
|
box-shadow: 0 14px 20px -5px rgba(32, 88, 143, 0.17);
|
|
291
289
|
border-radius: 60px;
|
|
292
290
|
background: #ffffff;
|
|
@@ -507,33 +505,23 @@ const Controls = ({ src, title }: Props) => {
|
|
|
507
505
|
<Time>-{formatTime(remainingTime)}</Time>
|
|
508
506
|
</ProgressWrapper>
|
|
509
507
|
<VolumeWrapper>
|
|
510
|
-
<
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
>
|
|
528
|
-
<VolumeSliderBackground as="div">
|
|
529
|
-
<VolumeSliderSelected as="div" />
|
|
530
|
-
<VolumeSliderHandle as="div" />
|
|
531
|
-
</VolumeSliderBackground>
|
|
532
|
-
</SliderInput>
|
|
533
|
-
</VolumeSliderWrapper>
|
|
534
|
-
</VolumeList>
|
|
535
|
-
</VolumeMenu>
|
|
536
|
-
</Menu>
|
|
508
|
+
<VolumeButton aria-label={t('audio.controls.adjustVolume')}>
|
|
509
|
+
<VolumeUp />
|
|
510
|
+
</VolumeButton>
|
|
511
|
+
<VolumeList>
|
|
512
|
+
<VolumeSliderWrapper>
|
|
513
|
+
<SliderInput
|
|
514
|
+
orientation={SliderOrientation.Vertical}
|
|
515
|
+
onChange={handleVolumeSliderChange}
|
|
516
|
+
value={volumeValue}
|
|
517
|
+
>
|
|
518
|
+
<VolumeSliderBackground as="div">
|
|
519
|
+
<VolumeSliderSelected as="div" />
|
|
520
|
+
<VolumeSliderHandle as="div" />
|
|
521
|
+
</VolumeSliderBackground>
|
|
522
|
+
</SliderInput>
|
|
523
|
+
</VolumeSliderWrapper>
|
|
524
|
+
</VolumeList>
|
|
537
525
|
</VolumeWrapper>
|
|
538
526
|
</ControlsWrapper>
|
|
539
527
|
</div>
|
package/src/List/OrderedList.tsx
CHANGED
|
@@ -24,7 +24,7 @@ export const generateListResets = () => {
|
|
|
24
24
|
const StyledOl = styled.ol`
|
|
25
25
|
margin-top: 0;
|
|
26
26
|
margin-left: ${spacing.normal};
|
|
27
|
-
${fonts.sizes('
|
|
27
|
+
${fonts.sizes('18px', '29px')};
|
|
28
28
|
list-style-type: none;
|
|
29
29
|
padding-left: ${spacing.medium} !important;
|
|
30
30
|
|