@pareto-engineering/design-system 4.0.0-alpha.37 → 4.0.0-alpha.39

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 (18) hide show
  1. package/dist/cjs/f/FormInput/FormInput.js +6 -0
  2. package/dist/cjs/f/fields/LinkInput/LinkInput.js +164 -0
  3. package/dist/cjs/f/fields/LinkInput/index.js +13 -0
  4. package/dist/cjs/f/fields/LinkInput/styles.scss +89 -0
  5. package/dist/cjs/f/fields/index.js +8 -1
  6. package/dist/es/f/FormInput/FormInput.js +7 -1
  7. package/dist/es/f/fields/LinkInput/LinkInput.js +156 -0
  8. package/dist/es/f/fields/LinkInput/index.js +2 -0
  9. package/dist/es/f/fields/LinkInput/styles.scss +89 -0
  10. package/dist/es/f/fields/index.js +2 -1
  11. package/package.json +3 -3
  12. package/src/stories/f/LinkInput.stories.jsx +100 -0
  13. package/src/ui/f/FormInput/FormInput.jsx +12 -0
  14. package/src/ui/f/fields/LinkInput/LinkInput.jsx +197 -0
  15. package/src/ui/f/fields/LinkInput/index.js +2 -0
  16. package/src/ui/f/fields/LinkInput/styles.scss +89 -0
  17. package/src/ui/f/fields/index.js +1 -0
  18. package/tests/__snapshots__/Storyshots.test.js.snap +393 -1
package/tests/__snapshots__/Storyshots.test.js.snap CHANGED
@@ -3172,7 +3172,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
3172
3172
  className="base timestamp"
3173
3173
  onClick={[Function]}
3174
3174
  >
3175
- 9 months ago
3175
+ 10 months ago
3176
3176
  </p>
3177
3177
  `;
3178
3178
 
@@ -18378,6 +18378,398 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
18378
18378
  </form>
18379
18379
  `;
18380
18380
 
18381
+ exports[`Storyshots f/fields/LinkInput Base 1`] = `
18382
+ <form
18383
+ action="#"
18384
+ onReset={[Function]}
18385
+ onSubmit={[Function]}
18386
+ >
18387
+ <div
18388
+ className="grid"
18389
+ >
18390
+ <label
18391
+ className="base form-label x-paragraph"
18392
+ htmlFor="link"
18393
+ style={
18394
+ {
18395
+ "--column-span": "var(--columns)",
18396
+ "--column-span-md": "var(--columns)",
18397
+ }
18398
+ }
18399
+ >
18400
+ Spreadsheet Link
18401
+ </label>
18402
+ <div
18403
+ className="base input-wrapper base link-input y-paragraph"
18404
+ style={
18405
+ {
18406
+ "--column-span": "var(--columns)",
18407
+ "--column-span-md": "var(--columns)",
18408
+ }
18409
+ }
18410
+ >
18411
+ <div
18412
+ className="input-link-wrapper"
18413
+ >
18414
+ <input
18415
+ className="input"
18416
+ disabled={false}
18417
+ id="link"
18418
+ name="link"
18419
+ onBlur={[Function]}
18420
+ onChange={[Function]}
18421
+ type="text"
18422
+ />
18423
+ <a
18424
+ rel="noopener noreferrer"
18425
+ target="_blank"
18426
+ >
18427
+ →
18428
+ </a>
18429
+ </div>
18430
+ </div>
18431
+ <div
18432
+ className="debugger"
18433
+ >
18434
+ <button
18435
+ className="base button x-main2"
18436
+ onClick={[Function]}
18437
+ type="button"
18438
+ >
18439
+ Open FormDebugger
18440
+ </button>
18441
+ </div>
18442
+ </div>
18443
+ </form>
18444
+ `;
18445
+
18446
+ exports[`Storyshots f/fields/LinkInput On Single Row 1`] = `
18447
+ <form
18448
+ action="#"
18449
+ onReset={[Function]}
18450
+ onSubmit={[Function]}
18451
+ >
18452
+ <div
18453
+ className="grid"
18454
+ >
18455
+ <label
18456
+ className="base form-label x-paragraph"
18457
+ htmlFor="link"
18458
+ style={
18459
+ {
18460
+ "--column-span": 4,
18461
+ "--column-span-md": 4,
18462
+ }
18463
+ }
18464
+ >
18465
+ Spreadsheet Link
18466
+ </label>
18467
+ <div
18468
+ className="base input-wrapper base link-input y-paragraph"
18469
+ style={
18470
+ {
18471
+ "--column-span": 4,
18472
+ "--column-span-md": 10,
18473
+ }
18474
+ }
18475
+ >
18476
+ <div
18477
+ className="input-link-wrapper"
18478
+ >
18479
+ <input
18480
+ className="input"
18481
+ disabled={false}
18482
+ id="link"
18483
+ name="link"
18484
+ onBlur={[Function]}
18485
+ onChange={[Function]}
18486
+ type="text"
18487
+ />
18488
+ <a
18489
+ rel="noopener noreferrer"
18490
+ target="_blank"
18491
+ >
18492
+ →
18493
+ </a>
18494
+ </div>
18495
+ </div>
18496
+ <div
18497
+ className="debugger"
18498
+ >
18499
+ <button
18500
+ className="base button x-main2"
18501
+ onClick={[Function]}
18502
+ type="button"
18503
+ >
18504
+ Open FormDebugger
18505
+ </button>
18506
+ </div>
18507
+ </div>
18508
+ </form>
18509
+ `;
18510
+
18511
+ exports[`Storyshots f/fields/LinkInput Optional 1`] = `
18512
+ <form
18513
+ action="#"
18514
+ onReset={[Function]}
18515
+ onSubmit={[Function]}
18516
+ >
18517
+ <div
18518
+ className="grid"
18519
+ >
18520
+ <label
18521
+ className="base form-label x-paragraph"
18522
+ htmlFor="link"
18523
+ style={
18524
+ {
18525
+ "--column-span": "var(--columns)",
18526
+ "--column-span-md": "var(--columns)",
18527
+ }
18528
+ }
18529
+ >
18530
+ Spreadsheet Link
18531
+ (Optional)
18532
+ </label>
18533
+ <div
18534
+ className="base input-wrapper base link-input y-paragraph"
18535
+ style={
18536
+ {
18537
+ "--column-span": "var(--columns)",
18538
+ "--column-span-md": "var(--columns)",
18539
+ }
18540
+ }
18541
+ >
18542
+ <div
18543
+ className="input-link-wrapper"
18544
+ >
18545
+ <input
18546
+ className="input"
18547
+ disabled={false}
18548
+ id="link"
18549
+ name="link"
18550
+ onBlur={[Function]}
18551
+ onChange={[Function]}
18552
+ type="text"
18553
+ />
18554
+ <a
18555
+ rel="noopener noreferrer"
18556
+ target="_blank"
18557
+ >
18558
+ →
18559
+ </a>
18560
+ </div>
18561
+ </div>
18562
+ <div
18563
+ className="debugger"
18564
+ >
18565
+ <button
18566
+ className="base button x-main2"
18567
+ onClick={[Function]}
18568
+ type="button"
18569
+ >
18570
+ Open FormDebugger
18571
+ </button>
18572
+ </div>
18573
+ </div>
18574
+ </form>
18575
+ `;
18576
+
18577
+ exports[`Storyshots f/fields/LinkInput With Disabled 1`] = `
18578
+ <form
18579
+ action="#"
18580
+ onReset={[Function]}
18581
+ onSubmit={[Function]}
18582
+ >
18583
+ <div
18584
+ className="grid"
18585
+ >
18586
+ <label
18587
+ className="base form-label x-paragraph"
18588
+ htmlFor="link"
18589
+ style={
18590
+ {
18591
+ "--column-span": "var(--columns)",
18592
+ "--column-span-md": "var(--columns)",
18593
+ }
18594
+ }
18595
+ >
18596
+ Spreadsheet Link
18597
+ </label>
18598
+ <div
18599
+ className="base input-wrapper base link-input y-paragraph"
18600
+ style={
18601
+ {
18602
+ "--column-span": "var(--columns)",
18603
+ "--column-span-md": "var(--columns)",
18604
+ }
18605
+ }
18606
+ >
18607
+ <div
18608
+ className="input-link-wrapper"
18609
+ >
18610
+ <input
18611
+ className="input"
18612
+ disabled={true}
18613
+ id="link"
18614
+ name="link"
18615
+ onBlur={[Function]}
18616
+ onChange={[Function]}
18617
+ type="text"
18618
+ />
18619
+ <a
18620
+ rel="noopener noreferrer"
18621
+ target="_blank"
18622
+ >
18623
+ →
18624
+ </a>
18625
+ </div>
18626
+ </div>
18627
+ <div
18628
+ className="debugger"
18629
+ >
18630
+ <button
18631
+ className="base button x-main2"
18632
+ onClick={[Function]}
18633
+ type="button"
18634
+ >
18635
+ Open FormDebugger
18636
+ </button>
18637
+ </div>
18638
+ </div>
18639
+ </form>
18640
+ `;
18641
+
18642
+ exports[`Storyshots f/fields/LinkInput With Placeholder 1`] = `
18643
+ <form
18644
+ action="#"
18645
+ onReset={[Function]}
18646
+ onSubmit={[Function]}
18647
+ >
18648
+ <div
18649
+ className="grid"
18650
+ >
18651
+ <label
18652
+ className="base form-label x-paragraph"
18653
+ htmlFor="link"
18654
+ style={
18655
+ {
18656
+ "--column-span": "var(--columns)",
18657
+ "--column-span-md": "var(--columns)",
18658
+ }
18659
+ }
18660
+ >
18661
+ Spreadsheet Link
18662
+ </label>
18663
+ <div
18664
+ className="base input-wrapper base link-input y-paragraph"
18665
+ style={
18666
+ {
18667
+ "--column-span": "var(--columns)",
18668
+ "--column-span-md": "var(--columns)",
18669
+ }
18670
+ }
18671
+ >
18672
+ <div
18673
+ className="input-link-wrapper"
18674
+ >
18675
+ <input
18676
+ className="input"
18677
+ disabled={false}
18678
+ id="link"
18679
+ name="link"
18680
+ onBlur={[Function]}
18681
+ onChange={[Function]}
18682
+ placeholder="Email address"
18683
+ type="text"
18684
+ />
18685
+ <a
18686
+ rel="noopener noreferrer"
18687
+ target="_blank"
18688
+ >
18689
+ →
18690
+ </a>
18691
+ </div>
18692
+ </div>
18693
+ <div
18694
+ className="debugger"
18695
+ >
18696
+ <button
18697
+ className="base button x-main2"
18698
+ onClick={[Function]}
18699
+ type="button"
18700
+ >
18701
+ Open FormDebugger
18702
+ </button>
18703
+ </div>
18704
+ </div>
18705
+ </form>
18706
+ `;
18707
+
18708
+ exports[`Storyshots f/fields/LinkInput With Validation 1`] = `
18709
+ <form
18710
+ action="#"
18711
+ onReset={[Function]}
18712
+ onSubmit={[Function]}
18713
+ >
18714
+ <div
18715
+ className="grid"
18716
+ >
18717
+ <label
18718
+ className="base form-label x-paragraph"
18719
+ htmlFor="link"
18720
+ style={
18721
+ {
18722
+ "--column-span": "var(--columns)",
18723
+ "--column-span-md": "var(--columns)",
18724
+ }
18725
+ }
18726
+ >
18727
+ Spreadsheet Link
18728
+ </label>
18729
+ <div
18730
+ className="base input-wrapper base link-input y-paragraph"
18731
+ style={
18732
+ {
18733
+ "--column-span": "var(--columns)",
18734
+ "--column-span-md": "var(--columns)",
18735
+ }
18736
+ }
18737
+ >
18738
+ <div
18739
+ className="input-link-wrapper"
18740
+ >
18741
+ <input
18742
+ className="input"
18743
+ disabled={false}
18744
+ id="link"
18745
+ name="link"
18746
+ onBlur={[Function]}
18747
+ onChange={[Function]}
18748
+ type="text"
18749
+ />
18750
+ <a
18751
+ rel="noopener noreferrer"
18752
+ target="_blank"
18753
+ >
18754
+ →
18755
+ </a>
18756
+ </div>
18757
+ </div>
18758
+ <div
18759
+ className="debugger"
18760
+ >
18761
+ <button
18762
+ className="base button x-main2"
18763
+ onClick={[Function]}
18764
+ type="button"
18765
+ >
18766
+ Open FormDebugger
18767
+ </button>
18768
+ </div>
18769
+ </div>
18770
+ </form>
18771
+ `;
18772
+
18381
18773
  exports[`Storyshots f/fields/QueryChoices Base 1`] = `
18382
18774
  <form
18383
18775
  action="#"