@indico-data/design-system 2.4.1 → 2.5.0

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 (30) hide show
  1. package/lib/index.css +119 -0
  2. package/lib/index.d.ts +2 -2
  3. package/lib/index.esm.css +119 -0
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js.map +1 -1
  6. package/lib/src/components/forms/input/Input.d.ts +18 -0
  7. package/lib/src/components/forms/input/Input.stories.d.ts +12 -0
  8. package/lib/src/components/forms/input/__tests__/Input.test.d.ts +1 -0
  9. package/lib/src/components/forms/input/index.d.ts +1 -0
  10. package/lib/src/components/forms/subcomponents/ErrorList.d.ts +6 -0
  11. package/lib/src/components/forms/subcomponents/Label.d.ts +8 -0
  12. package/lib/src/components/forms/subcomponents/__tests__/ErrorList.test.d.ts +1 -0
  13. package/lib/src/components/forms/subcomponents/__tests__/Label.test.d.ts +1 -0
  14. package/lib/src/components/index.d.ts +1 -0
  15. package/lib/src/components/table/Table.d.ts +2 -2
  16. package/package.json +1 -1
  17. package/src/components/forms/input/Input.mdx +19 -0
  18. package/src/components/forms/input/Input.stories.tsx +301 -0
  19. package/src/components/forms/input/Input.tsx +86 -0
  20. package/src/components/forms/input/__tests__/Input.test.tsx +213 -0
  21. package/src/components/forms/input/index.ts +1 -0
  22. package/src/components/forms/input/styles/Input.scss +112 -0
  23. package/src/components/forms/subcomponents/ErrorList.tsx +14 -0
  24. package/src/components/forms/subcomponents/Label.tsx +20 -0
  25. package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx +16 -0
  26. package/src/components/forms/subcomponents/__tests__/Label.test.tsx +33 -0
  27. package/src/components/index.ts +1 -0
  28. package/src/components/table/Table.tsx +2 -2
  29. package/src/styles/_typography.scss +29 -11
  30. package/src/styles/index.scss +1 -0
package/lib/index.css CHANGED
@@ -862,6 +862,109 @@
862
862
  fill: var(--pf-gray-color-300);
863
863
  }
864
864
 
865
+ :root,
866
+ :root [data-theme=light],
867
+ :root [data-theme=dark] {
868
+ --pf-input-background-color: var(--pf-white-color);
869
+ --pf-input-border-color: var(--pf-gray-color);
870
+ --pf-input-text-color: var(--pf-gray-color);
871
+ --pf-input-placeholder-text-color: var(--pf-gray-color-300);
872
+ --pf-input-help-text-color: var(--pf-gray-color-400);
873
+ --pf-input-rounded: var(--pf-rounded);
874
+ }
875
+
876
+ :root [data-theme=dark] {
877
+ --pf-input-background-color: var(--pf-primary-color);
878
+ --pf-input-border-color: var(--pf-gray-color-100);
879
+ --pf-input-text-color: var(--pf-gray-color-100);
880
+ --pf-input-placeholder-text-color: var(--pf-gray-color);
881
+ --pf-input-help-text-color: var(--pf-gray-color-200);
882
+ }
883
+
884
+ .input {
885
+ background-color: var(--pf-input-background-color);
886
+ border: 1px solid var(--pf-input-border-color);
887
+ border-radius: var(--pf-input-rounded);
888
+ color: var(--pf-input-text-color);
889
+ padding: 10px;
890
+ width: 100%;
891
+ box-sizing: border-box;
892
+ height: 36px;
893
+ }
894
+ .input::-moz-placeholder {
895
+ color: var(--pf-input-placeholder-text-color);
896
+ }
897
+ .input::placeholder {
898
+ color: var(--pf-input-placeholder-text-color);
899
+ }
900
+ .input:focus {
901
+ border-color: var(--pf-primary-color);
902
+ }
903
+ .input.error {
904
+ border-color: var(--pf-error-color);
905
+ }
906
+ .input.success {
907
+ border-color: var(--pf-success-color);
908
+ }
909
+ .input.warning {
910
+ border-color: var(--pf-warning-color);
911
+ }
912
+ .input.info {
913
+ border-color: var(--pf-info-color);
914
+ }
915
+ .input:disabled {
916
+ background-color: var(--pf-gray-color-100);
917
+ border-color: var(--pf-gray-color-300);
918
+ color: var(--pf-gray-color-400);
919
+ }
920
+ .input--has-icon {
921
+ padding-left: var(--pf-padding-7);
922
+ }
923
+
924
+ .form-control .error-list {
925
+ list-style: none;
926
+ padding: 0;
927
+ margin: 0;
928
+ margin-top: var(--pf-margin-2);
929
+ margin-bottom: var(--pf-margin-2);
930
+ color: var(--pf-error-color);
931
+ }
932
+ .form-control .help-text {
933
+ margin-top: var(--pf-margin-2);
934
+ margin-bottom: var(--pf-margin-2);
935
+ color: var(--pf-input-help-text-color);
936
+ font-size: var(--pf-font-size-subtitle2);
937
+ }
938
+ .form-control .input-wrapper {
939
+ position: relative;
940
+ }
941
+ .form-control .input-wrapper .embedded-icon {
942
+ position: absolute;
943
+ top: 10px;
944
+ left: var(--pf-margin-2);
945
+ color: var(--pf-input-text-color);
946
+ }
947
+ .form-control .input-wrapper .clearable-icon {
948
+ position: absolute;
949
+ top: var(--pf-margin-3);
950
+ right: var(--pf-margin-2);
951
+ color: var(--pf-input-text-color);
952
+ }
953
+ .form-control .is-visually-hidden {
954
+ position: absolute;
955
+ width: 1px;
956
+ height: 1px;
957
+ padding: 0;
958
+ margin: -1px;
959
+ overflow: hidden;
960
+ clip: rect(0, 0, 0, 0);
961
+ white-space: nowrap;
962
+ border: 0;
963
+ }
964
+ .form-control .form-label {
965
+ margin-bottom: var(--pf-margin-2);
966
+ }
967
+
865
968
  :root {
866
969
  --pf-font-family-base: "Mulish", sans-serif;
867
970
  --pf-font-size-base: 1rem;
@@ -1119,6 +1222,22 @@ p,
1119
1222
  overflow-wrap: break-word;
1120
1223
  }
1121
1224
 
1225
+ .text-error {
1226
+ color: var(--pf-error-color);
1227
+ }
1228
+
1229
+ .text-warning {
1230
+ color: var(--pf-warning-color);
1231
+ }
1232
+
1233
+ .text-success {
1234
+ color: var(--pf-success-color);
1235
+ }
1236
+
1237
+ .text-info {
1238
+ color: var(--pf-info-color);
1239
+ }
1240
+
1122
1241
  .color-primary {
1123
1242
  color: var(--pf-primary-color);
1124
1243
  }
package/lib/index.d.ts CHANGED
@@ -917,8 +917,8 @@ type Alignment = `${Alignment$1}`;
917
917
  type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
918
918
  isDisabled?: boolean;
919
919
  isLoading?: boolean;
920
- direction: Direction;
921
- subHeaderAlign: Alignment;
920
+ direction?: Direction;
921
+ subHeaderAlign?: Alignment;
922
922
  };
923
923
  declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
924
924
 
package/lib/index.esm.css CHANGED
@@ -862,6 +862,109 @@
862
862
  fill: var(--pf-gray-color-300);
863
863
  }
864
864
 
865
+ :root,
866
+ :root [data-theme=light],
867
+ :root [data-theme=dark] {
868
+ --pf-input-background-color: var(--pf-white-color);
869
+ --pf-input-border-color: var(--pf-gray-color);
870
+ --pf-input-text-color: var(--pf-gray-color);
871
+ --pf-input-placeholder-text-color: var(--pf-gray-color-300);
872
+ --pf-input-help-text-color: var(--pf-gray-color-400);
873
+ --pf-input-rounded: var(--pf-rounded);
874
+ }
875
+
876
+ :root [data-theme=dark] {
877
+ --pf-input-background-color: var(--pf-primary-color);
878
+ --pf-input-border-color: var(--pf-gray-color-100);
879
+ --pf-input-text-color: var(--pf-gray-color-100);
880
+ --pf-input-placeholder-text-color: var(--pf-gray-color);
881
+ --pf-input-help-text-color: var(--pf-gray-color-200);
882
+ }
883
+
884
+ .input {
885
+ background-color: var(--pf-input-background-color);
886
+ border: 1px solid var(--pf-input-border-color);
887
+ border-radius: var(--pf-input-rounded);
888
+ color: var(--pf-input-text-color);
889
+ padding: 10px;
890
+ width: 100%;
891
+ box-sizing: border-box;
892
+ height: 36px;
893
+ }
894
+ .input::-moz-placeholder {
895
+ color: var(--pf-input-placeholder-text-color);
896
+ }
897
+ .input::placeholder {
898
+ color: var(--pf-input-placeholder-text-color);
899
+ }
900
+ .input:focus {
901
+ border-color: var(--pf-primary-color);
902
+ }
903
+ .input.error {
904
+ border-color: var(--pf-error-color);
905
+ }
906
+ .input.success {
907
+ border-color: var(--pf-success-color);
908
+ }
909
+ .input.warning {
910
+ border-color: var(--pf-warning-color);
911
+ }
912
+ .input.info {
913
+ border-color: var(--pf-info-color);
914
+ }
915
+ .input:disabled {
916
+ background-color: var(--pf-gray-color-100);
917
+ border-color: var(--pf-gray-color-300);
918
+ color: var(--pf-gray-color-400);
919
+ }
920
+ .input--has-icon {
921
+ padding-left: var(--pf-padding-7);
922
+ }
923
+
924
+ .form-control .error-list {
925
+ list-style: none;
926
+ padding: 0;
927
+ margin: 0;
928
+ margin-top: var(--pf-margin-2);
929
+ margin-bottom: var(--pf-margin-2);
930
+ color: var(--pf-error-color);
931
+ }
932
+ .form-control .help-text {
933
+ margin-top: var(--pf-margin-2);
934
+ margin-bottom: var(--pf-margin-2);
935
+ color: var(--pf-input-help-text-color);
936
+ font-size: var(--pf-font-size-subtitle2);
937
+ }
938
+ .form-control .input-wrapper {
939
+ position: relative;
940
+ }
941
+ .form-control .input-wrapper .embedded-icon {
942
+ position: absolute;
943
+ top: 10px;
944
+ left: var(--pf-margin-2);
945
+ color: var(--pf-input-text-color);
946
+ }
947
+ .form-control .input-wrapper .clearable-icon {
948
+ position: absolute;
949
+ top: var(--pf-margin-3);
950
+ right: var(--pf-margin-2);
951
+ color: var(--pf-input-text-color);
952
+ }
953
+ .form-control .is-visually-hidden {
954
+ position: absolute;
955
+ width: 1px;
956
+ height: 1px;
957
+ padding: 0;
958
+ margin: -1px;
959
+ overflow: hidden;
960
+ clip: rect(0, 0, 0, 0);
961
+ white-space: nowrap;
962
+ border: 0;
963
+ }
964
+ .form-control .form-label {
965
+ margin-bottom: var(--pf-margin-2);
966
+ }
967
+
865
968
  :root {
866
969
  --pf-font-family-base: "Mulish", sans-serif;
867
970
  --pf-font-size-base: 1rem;
@@ -1119,6 +1222,22 @@ p,
1119
1222
  overflow-wrap: break-word;
1120
1223
  }
1121
1224
 
1225
+ .text-error {
1226
+ color: var(--pf-error-color);
1227
+ }
1228
+
1229
+ .text-warning {
1230
+ color: var(--pf-warning-color);
1231
+ }
1232
+
1233
+ .text-success {
1234
+ color: var(--pf-success-color);
1235
+ }
1236
+
1237
+ .text-info {
1238
+ color: var(--pf-info-color);
1239
+ }
1240
+
1122
1241
  .color-primary {
1123
1242
  color: var(--pf-primary-color);
1124
1243
  }