@telia/teddy 0.0.16 → 0.0.17

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 (7) hide show
  1. package/dist/components/badge/badge.js +2 -2
  2. package/dist/components/card/card.d.ts +6 -0
  3. package/dist/components/card/card.js +27 -20
  4. package/dist/style.css +45 -41
  5. package/dist/utils/layout/index.d.ts +1863 -0
  6. package/dist/utils/layout/index.js +1 -0
  7. package/package.json +15 -14
package/dist/components/badge/badge.js CHANGED
@@ -27,12 +27,12 @@ function getIcon(variant) {
27
27
  }
28
28
  }
29
29
  const Badge = React__default.forwardRef(
30
- ({ className, variant, asChild, children, ...props }, forwardRef) => {
30
+ ({ className, variant, hideIcon, asChild, children, ...props }, forwardRef) => {
31
31
  const classes = clsx([styles[`${rootClassName}`]], [styles[`${rootClassName}--${variant}`]], className);
32
32
  const Comp = asChild ? Slot : "span";
33
33
  const iconName = getIcon(variant);
34
34
  return /* @__PURE__ */ jsxs(Comp, { ...props, ref: forwardRef, className: classes, children: [
35
- !props.hideIcon && iconName && /* @__PURE__ */ jsx(Icon, { name: iconName }),
35
+ !hideIcon && iconName && /* @__PURE__ */ jsx(Icon, { name: iconName }),
36
36
  /* @__PURE__ */ jsx(Slottable, { children })
37
37
  ] });
38
38
  }
package/dist/components/card/card.d.ts CHANGED
@@ -45,6 +45,10 @@ type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>,
45
45
  * Link
46
46
  * -----------------------------------------------------------------------------------------------*/
47
47
  type LinkProps = React.ComponentPropsWithoutRef<typeof PrimitiveLink>;
48
+ /** -------------------------------------------------------------------------------------------------
49
+ * Line
50
+ * -----------------------------------------------------------------------------------------------*/
51
+ type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'as' | 'children'>;
48
52
  declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
49
53
  Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
50
54
  Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
@@ -82,6 +86,7 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
82
86
  variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
83
87
  } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
84
88
  Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;
89
+ Line: React.ForwardRefExoticComponent<LineProps & React.RefAttributes<HTMLDivElement>>;
85
90
  variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
86
91
  insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
87
92
  };
@@ -93,6 +98,7 @@ type CardProps = {
93
98
  Image: ImageProps;
94
99
  Slot: SlotProps;
95
100
  Link: LinkProps;
101
+ Line: LineProps;
96
102
  };
97
103
  export { Card };
98
104
  export type { CardProps };
package/dist/components/card/card.js CHANGED
@@ -9,27 +9,29 @@ import { Heading as Heading$1 } from "../heading/heading.js";
9
9
  import { Button as Button$1 } from "../button/button.js";
10
10
  import { Link as Link$1 } from "../link/link.js";
11
11
  import { TextSpacing } from "../text-spacing/text-spacing.js";
12
+ import { teddySpacing50 } from "../../tokens/spacing/variables.js";
12
13
  const styles = {
13
- "teddy-card": "_teddy-card_16ne3_3",
14
- "teddy-card__slot": "_teddy-card__slot_16ne3_13",
15
- "teddy-card__slot--bottom": "_teddy-card__slot--bottom_16ne3_16",
16
- "teddy-card__slot--center": "_teddy-card__slot--center_16ne3_19",
17
- "teddy-card__action": "_teddy-card__action_16ne3_40",
18
- "teddy-card__action--disabled": "_teddy-card__action--disabled_16ne3_40",
19
- "teddy-card--border": "_teddy-card--border_16ne3_46",
20
- "teddy-card--purple-light": "_teddy-card--purple-light_16ne3_49",
21
- "teddy-card--purple-dark": "_teddy-card--purple-dark_16ne3_63",
22
- "teddy-card--white": "_teddy-card--white_16ne3_82",
23
- "teddy-card--gray": "_teddy-card--gray_16ne3_96",
24
- "teddy-card--beige": "_teddy-card--beige_16ne3_110",
25
- "teddy-card__image--as-background": "_teddy-card__image--as-background_16ne3_124",
26
- "teddy-card__heading": "_teddy-card__heading_16ne3_127",
27
- "teddy-card--background-image": "_teddy-card--background-image_16ne3_130",
28
- "teddy-card__image": "_teddy-card__image_16ne3_124",
29
- "teddy-card__image--inset-top": "_teddy-card__image--inset-top_16ne3_145",
30
- "teddy-card__image--inset-bottom": "_teddy-card__image--inset-bottom_16ne3_148",
31
- "teddy-card__image--inset-left": "_teddy-card__image--inset-left_16ne3_151",
32
- "teddy-card__image--inset-right": "_teddy-card__image--inset-right_16ne3_154"
14
+ "teddy-card": "_teddy-card_1h4hf_3",
15
+ "teddy-card__slot": "_teddy-card__slot_1h4hf_13",
16
+ "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1h4hf_16",
17
+ "teddy-card__slot--center": "_teddy-card__slot--center_1h4hf_19",
18
+ "teddy-card__action": "_teddy-card__action_1h4hf_40",
19
+ "teddy-card__action--disabled": "_teddy-card__action--disabled_1h4hf_40",
20
+ "teddy-card--border": "_teddy-card--border_1h4hf_46",
21
+ "teddy-card__line": "_teddy-card__line_1h4hf_49",
22
+ "teddy-card--purple-light": "_teddy-card--purple-light_1h4hf_53",
23
+ "teddy-card--purple-dark": "_teddy-card--purple-dark_1h4hf_67",
24
+ "teddy-card--white": "_teddy-card--white_1h4hf_86",
25
+ "teddy-card--gray": "_teddy-card--gray_1h4hf_100",
26
+ "teddy-card--beige": "_teddy-card--beige_1h4hf_114",
27
+ "teddy-card__image--as-background": "_teddy-card__image--as-background_1h4hf_128",
28
+ "teddy-card__heading": "_teddy-card__heading_1h4hf_131",
29
+ "teddy-card--background-image": "_teddy-card--background-image_1h4hf_134",
30
+ "teddy-card__image": "_teddy-card__image_1h4hf_128",
31
+ "teddy-card__image--inset-top": "_teddy-card__image--inset-top_1h4hf_149",
32
+ "teddy-card__image--inset-bottom": "_teddy-card__image--inset-bottom_1h4hf_152",
33
+ "teddy-card__image--inset-left": "_teddy-card__image--inset-left_1h4hf_155",
34
+ "teddy-card__image--inset-right": "_teddy-card__image--inset-right_1h4hf_158"
33
35
  };
34
36
  const rootClassName = "teddy-card";
35
37
  const actionElementIdentifier = `${rootClassName}__action`;
@@ -188,6 +190,10 @@ const Link = React__default.forwardRef(
188
190
  }
189
191
  );
190
192
  Link.displayName = "Card.Link";
193
+ const Line = React__default.forwardRef(({ className, ...props }, forwardRef) => {
194
+ const classes = clsx([styles[`${rootClassName}__line`]], className);
195
+ return /* @__PURE__ */ jsx(Box, { width: "100%", p: "0", m: `${teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
196
+ });
191
197
  const Card = Object.assign(Root, {
192
198
  Root,
193
199
  Heading,
@@ -196,6 +202,7 @@ const Card = Object.assign(Root, {
196
202
  Button,
197
203
  Link,
198
204
  Slot,
205
+ Line,
199
206
  variantOptions,
200
207
  insetOptions
201
208
  });
package/dist/style.css CHANGED
@@ -658,29 +658,29 @@
658
658
  margin-bottom: 0;
659
659
  }@layer heading, button, card;
660
660
  @layer card {
661
- ._teddy-card_16ne3_3 {
661
+ ._teddy-card_1h4hf_3 {
662
662
  border-radius: var(--teddy-border-radius-md);
663
663
  padding: var(--teddy-spacing-250);
664
664
  position: relative;
665
665
  }
666
666
  @media (prefers-reduced-motion: no-preference) {
667
- ._teddy-card_16ne3_3 {
667
+ ._teddy-card_1h4hf_3 {
668
668
  transition: background-color var(--teddy-motion-duration-300) ease;
669
669
  }
670
670
  }
671
- ._teddy-card__slot_16ne3_13 {
671
+ ._teddy-card__slot_1h4hf_13 {
672
672
  transform: translateY(-50%);
673
673
  }
674
- ._teddy-card__slot--bottom_16ne3_16 {
674
+ ._teddy-card__slot--bottom_1h4hf_16 {
675
675
  transform: translateY(50%);
676
676
  }
677
- ._teddy-card__slot--center_16ne3_19 {
677
+ ._teddy-card__slot--center_1h4hf_19 {
678
678
  transform: translate(-50%, -50%);
679
679
  }
680
- ._teddy-card__slot--bottom_16ne3_16._teddy-card__slot--center_16ne3_19 {
680
+ ._teddy-card__slot--bottom_1h4hf_16._teddy-card__slot--center_1h4hf_19 {
681
681
  transform: translate(-50%, 50%);
682
682
  }
683
- ._teddy-card_16ne3_3::before {
683
+ ._teddy-card_1h4hf_3::before {
684
684
  content: "";
685
685
  display: block;
686
686
  position: absolute;
@@ -691,106 +691,110 @@
691
691
  box-shadow: var(--teddy-shadow-md);
692
692
  }
693
693
  @media (prefers-reduced-motion: no-preference) {
694
- ._teddy-card_16ne3_3::before {
694
+ ._teddy-card_1h4hf_3::before {
695
695
  transition: opacity var(--teddy-motion-duration-300) ease;
696
696
  }
697
697
  }
698
- ._teddy-card_16ne3_3:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
698
+ ._teddy-card_1h4hf_3:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
699
699
  cursor: pointer;
700
700
  }
701
- ._teddy-card_16ne3_3:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)):hover:not(:has(button:hover), :has(a:hover))::before, ._teddy-card_16ne3_3:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)):has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40))::before {
701
+ ._teddy-card_1h4hf_3:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)):hover:not(:has(button:hover), :has(a:hover))::before, ._teddy-card_1h4hf_3:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)):has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40))::before {
702
702
  opacity: 1;
703
703
  }
704
- ._teddy-card--border_16ne3_46 {
704
+ ._teddy-card--border_1h4hf_46 {
705
705
  border: var(--teddy-border-width-xs) solid transparent;
706
706
  }
707
- ._teddy-card--purple-light_16ne3_49 {
707
+ ._teddy-card__line_1h4hf_49 {
708
+ border: 0;
709
+ border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
710
+ }
711
+ ._teddy-card--purple-light_1h4hf_53 {
708
712
  background-color: var(--teddy-color-background-interactive-primary-negative);
709
713
  color: var(--teddy-color-text-default);
710
714
  border-color: var(--teddy-color-background-interactive-primary-negative);
711
715
  }
712
- ._teddy-card--purple-light_16ne3_49:hover:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
716
+ ._teddy-card--purple-light_1h4hf_53:hover:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
713
717
  background-color: var(--teddy-color-background-interactive-primary-negative-hover);
714
718
  }
715
- ._teddy-card--purple-light_16ne3_49:active:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
719
+ ._teddy-card--purple-light_1h4hf_53:active:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
716
720
  background-color: var(--teddy-color-background-interactive-primary-negative-active);
717
721
  }
718
- ._teddy-card--purple-light_16ne3_49:has(._teddy-card__action--disabled_16ne3_40) {
722
+ ._teddy-card--purple-light_1h4hf_53:has(._teddy-card__action--disabled_1h4hf_40) {
719
723
  background-color: var(--teddy-color-background-interactive-disabled);
720
724
  }
721
- ._teddy-card--purple-dark_16ne3_63 {
725
+ ._teddy-card--purple-dark_1h4hf_67 {
722
726
  background-color: var(--teddy-color-brand-deep-purple);
723
727
  color: var(--teddy-color-text-default-negative);
724
728
  border-color: var(--teddy-color-brand-deep-purple);
725
729
  }
726
- ._teddy-card--purple-dark_16ne3_63:hover:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
730
+ ._teddy-card--purple-dark_1h4hf_67:hover:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
727
731
  background-color: var(--teddy-color-background-interactive-transparent-negative-hover);
728
732
  }
729
- ._teddy-card--purple-dark_16ne3_63:active:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
733
+ ._teddy-card--purple-dark_1h4hf_67:active:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
730
734
  background-color: var(--teddy-color-background-interactive-transparent-negative-active);
731
735
  }
732
- ._teddy-card--purple-dark_16ne3_63:has(._teddy-card__action--disabled_16ne3_40) {
736
+ ._teddy-card--purple-dark_1h4hf_67:has(._teddy-card__action--disabled_1h4hf_40) {
733
737
  color: var(--teddy-color-text-default);
734
738
  background-color: var(--teddy-color-background-interactive-disabled);
735
739
  }
736
- ._teddy-card--purple-dark_16ne3_63:has(._teddy-card__action--disabled_16ne3_40) ._teddy-card__action_16ne3_40 {
740
+ ._teddy-card--purple-dark_1h4hf_67:has(._teddy-card__action--disabled_1h4hf_40) ._teddy-card__action_1h4hf_40 {
737
741
  color: var(--teddy-color-text-weak);
738
742
  background-color: var(--teddy-color-background-interactive-disabled);
739
743
  }
740
- ._teddy-card--white_16ne3_82 {
744
+ ._teddy-card--white_1h4hf_86 {
741
745
  background-color: var(--teddy-color-brand-white);
742
746
  color: var(--teddy-color-text-default);
743
747
  border-color: var(--teddy-color-border-interactive-subtle);
744
748
  }
745
- ._teddy-card--white_16ne3_82:hover:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
749
+ ._teddy-card--white_1h4hf_86:hover:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
746
750
  background-color: var(--teddy-color-background-interactive-transparent-hover);
747
751
  }
748
- ._teddy-card--white_16ne3_82:active:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
752
+ ._teddy-card--white_1h4hf_86:active:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
749
753
  background-color: var(--teddy-color-background-interactive-transparent-active);
750
754
  }
751
- ._teddy-card--white_16ne3_82:has(._teddy-card__action--disabled_16ne3_40) {
755
+ ._teddy-card--white_1h4hf_86:has(._teddy-card__action--disabled_1h4hf_40) {
752
756
  background-color: var(--teddy-color-background-interactive-disabled);
753
757
  }
754
- ._teddy-card--gray_16ne3_96 {
758
+ ._teddy-card--gray_1h4hf_100 {
755
759
  background-color: var(--teddy-color-background-secondary);
756
760
  color: var(--teddy-color-text-default);
757
761
  border-color: var(--teddy-color-border-interactive-subtle);
758
762
  }
759
- ._teddy-card--gray_16ne3_96:hover:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
763
+ ._teddy-card--gray_1h4hf_100:hover:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
760
764
  background-color: var(--teddy-color-gray-100);
761
765
  }
762
- ._teddy-card--gray_16ne3_96:active:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
766
+ ._teddy-card--gray_1h4hf_100:active:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
763
767
  background-color: var(--teddy-color-gray-200);
764
768
  }
765
- ._teddy-card--gray_16ne3_96:has(._teddy-card__action--disabled_16ne3_40) {
769
+ ._teddy-card--gray_1h4hf_100:has(._teddy-card__action--disabled_1h4hf_40) {
766
770
  background-color: var(--teddy-color-background-interactive-disabled);
767
771
  }
768
- ._teddy-card--beige_16ne3_110 {
772
+ ._teddy-card--beige_1h4hf_114 {
769
773
  background-color: var(--teddy-color-beige-100);
770
774
  color: var(--teddy-color-text-default);
771
775
  border-color: var(--teddy-color-beige-300);
772
776
  }
773
- ._teddy-card--beige_16ne3_110:hover:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
777
+ ._teddy-card--beige_1h4hf_114:hover:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
774
778
  background-color: var(--teddy-color-beige-200);
775
779
  }
776
- ._teddy-card--beige_16ne3_110:active:has(._teddy-card__action_16ne3_40:not(._teddy-card__action--disabled_16ne3_40)) {
780
+ ._teddy-card--beige_1h4hf_114:active:has(._teddy-card__action_1h4hf_40:not(._teddy-card__action--disabled_1h4hf_40)) {
777
781
  background-color: var(--teddy-color-beige-300);
778
782
  }
779
- ._teddy-card--beige_16ne3_110:has(._teddy-card__action--disabled_16ne3_40) {
783
+ ._teddy-card--beige_1h4hf_114:has(._teddy-card__action--disabled_1h4hf_40) {
780
784
  background-color: var(--teddy-color-background-interactive-disabled);
781
785
  }
782
- ._teddy-card_16ne3_3:has(._teddy-card__image--as-background_16ne3_124) {
786
+ ._teddy-card_1h4hf_3:has(._teddy-card__image--as-background_1h4hf_128) {
783
787
  background-color: transparent;
784
788
  }
785
- ._teddy-card__heading_16ne3_127 {
789
+ ._teddy-card__heading_1h4hf_131 {
786
790
  color: inherit;
787
791
  }
788
- ._teddy-card--background-image_16ne3_130 {
792
+ ._teddy-card--background-image_1h4hf_134 {
789
793
  background-repeat: no-repeat;
790
794
  background-size: cover;
791
795
  background-position: center;
792
796
  }
793
- ._teddy-card__image_16ne3_124 {
797
+ ._teddy-card__image_1h4hf_128 {
794
798
  height: auto;
795
799
  vertical-align: middle;
796
800
  font-style: italic;
@@ -800,19 +804,19 @@
800
804
  border-radius: inherit;
801
805
  padding-bottom: var(--teddy-spacing-200);
802
806
  }
803
- ._teddy-card__image--inset-top_16ne3_145 {
807
+ ._teddy-card__image--inset-top_1h4hf_149 {
804
808
  margin-top: calc(var(--teddy-spacing-250) * -1);
805
809
  }
806
- ._teddy-card__image--inset-bottom_16ne3_148 {
810
+ ._teddy-card__image--inset-bottom_1h4hf_152 {
807
811
  margin-bottom: calc(var(--teddy-spacing-250) * -1);
808
812
  }
809
- ._teddy-card__image--inset-left_16ne3_151 {
813
+ ._teddy-card__image--inset-left_1h4hf_155 {
810
814
  margin-left: calc(var(--teddy-spacing-250) * -1);
811
815
  }
812
- ._teddy-card__image--inset-right_16ne3_154 {
816
+ ._teddy-card__image--inset-right_1h4hf_158 {
813
817
  margin-right: calc(var(--teddy-spacing-250) * -1);
814
818
  }
815
- ._teddy-card__image--inset-left_16ne3_151 ._teddy-card__image--inset-right_16ne3_154 {
819
+ ._teddy-card__image--inset-left_1h4hf_155 ._teddy-card__image--inset-right_1h4hf_158 {
816
820
  width: calc(100% + var(--teddy-spacing-250) * 2);
817
821
  }
818
822
  }@layer heading, button, card, notification;