superdesk-ui-framework 3.0.74 → 3.0.76

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.
Files changed (40) hide show
  1. package/app/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
  2. package/app/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
  3. package/app/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
  4. package/app/img/icon_illustrations/IconIllustration__summary.svg +27 -0
  5. package/app/img/icon_illustrations/IconIllustration__translate.svg +12 -0
  6. package/app/styles/_buttons.scss +47 -0
  7. package/app/styles/_simple-list.scss +13 -1
  8. package/app/styles/components/_list-item.scss +4 -0
  9. package/app/styles/components/_sd-grid-item.scss +4 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
  11. package/app/styles/form-elements/_inputs.scss +53 -11
  12. package/app-typescript/components/FormLabel.tsx +1 -1
  13. package/app-typescript/components/IllustrationButton.tsx +29 -0
  14. package/app-typescript/components/Lists/SimpleList.tsx +3 -0
  15. package/app-typescript/components/Select.tsx +13 -11
  16. package/app-typescript/components/SvgIconIllustration.tsx +191 -0
  17. package/app-typescript/index.ts +2 -0
  18. package/dist/examples.bundle.js +1143 -543
  19. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  20. package/dist/playgrounds/react-playgrounds/TestGround.tsx +462 -2
  21. package/dist/react/IllustrationButton.tsx +89 -0
  22. package/dist/react/Index.tsx +6 -1
  23. package/dist/superdesk-ui.bundle.css +110 -14
  24. package/dist/superdesk-ui.bundle.js +588 -306
  25. package/dist/vendor.bundle.js +13 -13
  26. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  27. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +462 -2
  28. package/examples/pages/react/IllustrationButton.tsx +89 -0
  29. package/examples/pages/react/Index.tsx +6 -1
  30. package/package.json +1 -4
  31. package/react/components/FormLabel.js +1 -1
  32. package/react/components/IllustrationButton.d.ts +11 -0
  33. package/react/components/IllustrationButton.js +62 -0
  34. package/react/components/Lists/SimpleList.d.ts +1 -0
  35. package/react/components/Lists/SimpleList.js +1 -0
  36. package/react/components/Select.js +2 -1
  37. package/react/components/SvgIconIllustration.d.ts +9 -0
  38. package/react/components/SvgIconIllustration.js +199 -0
  39. package/react/index.d.ts +2 -0
  40. package/react/index.js +6 -2
@@ -11548,6 +11548,9 @@
11548
11548
  --space--3: calc(3 * var(--base-increment));
11549
11549
  --space--4: calc(4 * var(--base-increment));
11550
11550
  --space--5: calc(5 * var(--base-increment));
11551
+ --space--6: calc(6 * var(--base-increment));
11552
+ --space--7: calc(7 * var(--base-increment));
11553
+ --space--8: calc(8 * var(--base-increment));
11551
11554
  --gap--none: 0;
11552
11555
  --gap--x-small: 0.4rem;
11553
11556
  --gap--small: 0.8rem;
@@ -11578,6 +11581,10 @@
11578
11581
  --width__modal--large: 80rem;
11579
11582
  --width__modal--x-large: 80vw;
11580
11583
  --text-size--base: 1rem;
11584
+ --text-size-x-small: calc(var(--text-size--base) * 1.2);
11585
+ --text-size-small: calc(var(--text-size--base) * 1.4);
11586
+ --text-size-medium: calc(var(--text-size--base) * 1.6);
11587
+ --text-size-large: calc(var(--text-size--base) * 2);
11581
11588
  --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
11582
11589
  --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
11583
11590
  --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
@@ -11585,7 +11592,10 @@
11585
11592
  --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
11586
11593
  --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
11587
11594
  --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
11588
- --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1)); }
11595
+ --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
11596
+ --form-element-height-small: var(--space--3);
11597
+ --form-element-height-medium: var(--space--4);
11598
+ --form-element-height-large: var(--space--5); }
11589
11599
 
11590
11600
  :root,
11591
11601
  [data-theme="light-ui"] {
@@ -18611,7 +18621,8 @@ h6 {
18611
18621
  border-inline-width: 0 1px; }
18612
18622
 
18613
18623
  .button-group--right, .button-group--end {
18614
- margin-inline-start: auto; }
18624
+ margin-inline-start: auto;
18625
+ justify-content: flex-end; }
18615
18626
 
18616
18627
  .button-group--center {
18617
18628
  margin-inline-start: auto;
@@ -18765,6 +18776,43 @@ h6 {
18765
18776
  .button-group .tag-label, .button-group .p-multiselect-token {
18766
18777
  margin: 0 !important; }
18767
18778
 
18779
+ .illustration-button {
18780
+ display: flex;
18781
+ flex-direction: column;
18782
+ align-items: center;
18783
+ gap: var(--space--1);
18784
+ border-radius: var(--b-radius--large);
18785
+ border: 1px solid var(--sd-colour-line--light);
18786
+ padding-inline: var(--space--2);
18787
+ padding-block-start: var(--space--2);
18788
+ padding-block-end: var(--space--1-5);
18789
+ box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.16) 0px 6px 12px -6px, rgba(0, 0, 0, 0.4) 0px 2px 8px -8px;
18790
+ transition: all 0.2s ease; }
18791
+ .illustration-button:hover {
18792
+ border: 1px solid var(--sd-colour-line--strong);
18793
+ box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.24) 0px 6px 12px -6px, rgba(0, 0, 0, 0.6) 0px 2px 8px -8px; }
18794
+ .illustration-button:active {
18795
+ border: 1px solid var(--sd-colour-interactive);
18796
+ box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 4px; }
18797
+ .illustration-button:focus-visible {
18798
+ outline: 2px solid var(--sd-colour-interactive--alpha-60);
18799
+ outline-offset: 1px; }
18800
+ .illustration-button:disabled, .illustration-button.illustration-button--disabled {
18801
+ box-shadow: none;
18802
+ border: 1px solid var(--sd-colour-line--light);
18803
+ pointer-events: none;
18804
+ opacity: 0.6; }
18805
+
18806
+ .illustration-button__illustration,
18807
+ .svg-icon-illustration {
18808
+ display: inline-block; }
18809
+
18810
+ .illustration-button__text-label {
18811
+ font-size: var(--text-size-small);
18812
+ font-weight: 500;
18813
+ line-height: 1.2;
18814
+ text-align: center; }
18815
+
18768
18816
  .label {
18769
18817
  display: inline-flex;
18770
18818
  align-items: center;
@@ -35246,11 +35294,19 @@ a.label {
35246
35294
  display: flex;
35247
35295
  flex-direction: row;
35248
35296
  align-items: center;
35249
- gap: 0.8rem;
35297
+ gap: var(--space--1);
35250
35298
  color: var(--color-text); }
35251
35299
  .simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
35252
35300
  flex-grow: 0;
35253
35301
  flex-shrink: 0; }
35302
+ .simple-list .simple-list__item.simple-list__item--gap-none {
35303
+ gap: 0; }
35304
+ .simple-list .simple-list__item.simple-list__item--gap-small {
35305
+ gap: var(--space-0-5); }
35306
+ .simple-list .simple-list__item.simple-list__item--gap-medium {
35307
+ gap: var(--space-1); }
35308
+ .simple-list .simple-list__item.simple-list__item--gap-large {
35309
+ gap: var(--space-1-5); }
35254
35310
  .simple-list .simple-list__item--stacked {
35255
35311
  display: flex;
35256
35312
  flex-direction: column;
@@ -42122,6 +42178,8 @@ a.text-link {
42122
42178
  margin: 0.2rem 0 0.8rem; }
42123
42179
  .sd-list-item__row:only-child {
42124
42180
  margin: 0.2rem 0; }
42181
+ .sd-list-item__row.sd-list-item__row--overflow-visible {
42182
+ overflow: visible !important; }
42125
42183
 
42126
42184
  .sd-list-item__row--only-child {
42127
42185
  margin: 0.2rem 0 !important; }
@@ -43301,6 +43359,9 @@ a.text-link {
43301
43359
  grid-gap: 2.4rem;
43302
43360
  margin: 2.4rem; }
43303
43361
 
43362
+ .sd-grid-list--xx-small {
43363
+ grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
43364
+
43304
43365
  .sd-grid-list--x-small {
43305
43366
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
43306
43367
 
@@ -49649,7 +49710,7 @@ textarea.sd-media-carousel__media-title {
49649
49710
  position: relative;
49650
49711
  display: block;
49651
49712
  position: relative;
49652
- padding-inline-end: 2rem;
49713
+ padding-inline-end: var(--space--3);
49653
49714
  min-width: 5rem;
49654
49715
  cursor: pointer; }
49655
49716
  .sd-input__select::placeholder {
@@ -49722,25 +49783,60 @@ textarea.sd-media-carousel__media-title {
49722
49783
  grid-column: 2/4; }
49723
49784
  .sd-input.sd-input--is-select::after {
49724
49785
  position: relative;
49725
- z-index: 1;
49786
+ font-family: 'sd_icons';
49787
+ content: "\e64b";
49726
49788
  grid-row: 2/3;
49727
49789
  grid-column: 2/4;
49790
+ --icon-base-size: 14px !important;
49791
+ width: var(--icon-base-size);
49792
+ height: var(--icon-base-size);
49793
+ line-height: var(--icon-base-size);
49794
+ font-size: var(--icon-base-size);
49795
+ speak: none;
49796
+ font-style: normal;
49797
+ font-weight: normal;
49798
+ font-variant: normal;
49799
+ text-transform: none;
49800
+ color: var(--color-icon-default);
49801
+ -webkit-font-smoothing: antialiased;
49728
49802
  align-self: center;
49729
49803
  justify-self: flex-end;
49730
49804
  display: inline-block;
49731
- width: 0;
49732
- height: 0;
49733
- margin-inline-end: 1rem;
49734
- vertical-align: middle;
49735
- border-inline-start: 0.4rem solid transparent;
49736
- border-inline-end: 0.4rem solid transparent;
49737
- border-block-start: 0.4rem solid var(--color-text);
49805
+ margin-inline-end: var(--space--1);
49738
49806
  pointer-events: none;
49739
49807
  opacity: 0.4;
49740
- content: "";
49741
- z-index: 0; }
49808
+ z-index: 0;
49809
+ transition: opacity 0.2s ease; }
49742
49810
  .sd-input.sd-input--is-select:hover::after {
49743
49811
  opacity: 0.6; }
49812
+ .sd-input .sd-input__select-caret-wrapper {
49813
+ position: relative;
49814
+ display: block; }
49815
+ .sd-input .sd-input__select-caret-wrapper::after {
49816
+ --icon-base-size: 14px !important;
49817
+ font-family: 'sd_icons';
49818
+ content: "\e64b";
49819
+ position: absolute;
49820
+ inset-block-start: 10px;
49821
+ inset-inline-end: 0;
49822
+ width: var(--icon-base-size);
49823
+ height: var(--icon-base-size);
49824
+ line-height: var(--icon-base-size);
49825
+ font-size: var(--icon-base-size);
49826
+ speak: none;
49827
+ font-style: normal;
49828
+ font-weight: normal;
49829
+ font-variant: normal;
49830
+ text-transform: none;
49831
+ color: var(--color-text);
49832
+ -webkit-font-smoothing: antialiased;
49833
+ margin-inline-end: var(--space--1);
49834
+ pointer-events: none;
49835
+ opacity: 0.6;
49836
+ z-index: 0;
49837
+ transition: opacity 0.2s ease; }
49838
+ .sd-input .sd-input__select-caret-wrapper:hover::after {
49839
+ opacity: 1; }
49744
49840
  .sd-input .sd-input__message-box {
49745
49841
  grid-row: 3/4;
49746
49842
  grid-column: 2/3; }