@fluidattacks/design 8.5.0 → 8.6.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 (4) hide show
  1. package/dist/components/button/index.stories.d.ts +2 -1
  2. package/dist/components/button/styles.js +56 -39
  3. package/dist/components/button/types.d.ts +1 -1
  4. package/package.json +1 -1
package/dist/components/button/index.stories.d.ts CHANGED
@@ -12,5 +12,6 @@ declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import(
12
12
  declare const Secondary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
13
13
  declare const Tertiary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
14
14
  declare const Ghost: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
15
- export { Default, Secondary, Tertiary, Ghost };
15
+ declare const TextLink: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
16
+ export { Default, Secondary, Tertiary, Ghost, TextLink };
16
17
  export default config;
package/dist/components/button/styles.js CHANGED
@@ -2,99 +2,116 @@ import { styled as n } from "styled-components";
2
2
  import { variantBuilder as t } from "../@core/variants/utils.js";
3
3
  import { BaseButtonComponent as i } from "../@core/styles.js";
4
4
  const { getVariant: l } = t(
5
- (a) => ({
5
+ (r) => ({
6
6
  ghost: `
7
7
  background: transparent;
8
8
  border: none;
9
- color: ${a.palette.gray[800]};
10
- --btn-padding-x: ${a.spacing[0.5]};
11
- --btn-padding-y: ${a.spacing[0.625]};
12
- --btn-spacing: ${a.spacing[0.25]};
9
+ color: ${r.palette.gray[800]};
10
+ --btn-padding-x: ${r.spacing[0.5]};
11
+ --btn-padding-y: ${r.spacing[0.625]};
12
+ --btn-spacing: ${r.spacing[0.25]};
13
13
 
14
14
  &:disabled {
15
- color: ${a.palette.gray[400]};
15
+ color: ${r.palette.gray[400]};
16
16
  cursor: not-allowed;
17
17
  }
18
18
 
19
19
  &:hover:not([disabled]) {
20
- background-color: ${a.palette.gray[100]};
21
- color: ${a.palette.gray[800]};
20
+ background-color: ${r.palette.gray[100]};
21
+ color: ${r.palette.gray[800]};
22
22
  }
23
23
  `,
24
24
  link: `
25
25
  --btn-padding-x: 0;
26
26
  --btn-padding-y: 0;
27
- color: ${a.palette.gray[800]};
27
+ color: ${r.palette.gray[800]};
28
28
 
29
29
  &:hover {
30
- color: ${a.palette.gray[500]};
30
+ color: ${r.palette.gray[500]};
31
31
  }
32
32
  `,
33
33
  primary: `
34
- background: ${a.palette.primary[500]};
34
+ background: ${r.palette.primary[500]};
35
35
  border: none;
36
- color: ${a.palette.white};
37
- --btn-spacing: ${a.spacing[0.25]};
36
+ color: ${r.palette.white};
37
+ --btn-spacing: ${r.spacing[0.25]};
38
38
 
39
39
  &:disabled {
40
- background: ${a.palette.gray[200]};
41
- color: ${a.palette.gray[400]};
40
+ background: ${r.palette.gray[200]};
41
+ color: ${r.palette.gray[400]};
42
42
  cursor: not-allowed;
43
43
  }
44
44
 
45
45
  &:hover:not([disabled]) {
46
- background-color: ${a.palette.primary[700]};
47
- color: ${a.palette.white};
46
+ background-color: ${r.palette.primary[700]};
47
+ color: ${r.palette.white};
48
48
  }
49
49
  `,
50
50
  secondary: `
51
- background: ${a.palette.gray[800]};
51
+ background: ${r.palette.gray[800]};
52
52
  border: none;
53
- color: ${a.palette.white};
54
- --btn-spacing: ${a.spacing[0.25]};
53
+ color: ${r.palette.white};
54
+ --btn-spacing: ${r.spacing[0.25]};
55
55
 
56
56
  &:disabled {
57
- background: ${a.palette.gray[200]};
58
- color: ${a.palette.gray[400]};
57
+ background: ${r.palette.gray[200]};
58
+ color: ${r.palette.gray[400]};
59
59
  cursor: not-allowed;
60
60
  }
61
61
 
62
62
  &:hover:not([disabled]) {
63
- background-color: ${a.palette.gray[600]};
64
- color: ${a.palette.white};
63
+ background-color: ${r.palette.gray[600]};
64
+ color: ${r.palette.white};
65
65
  }
66
66
  `,
67
67
  tertiary: `
68
68
  background: transparent;
69
- border: 1px solid ${a.palette.primary[500]};
70
- color: ${a.palette.primary[500]};
71
- --btn-spacing: ${a.spacing[0.25]};
69
+ border: 1px solid ${r.palette.primary[500]};
70
+ color: ${r.palette.primary[500]};
71
+ --btn-spacing: ${r.spacing[0.25]};
72
72
 
73
73
  &:disabled {
74
74
  background: transparent;
75
- border: 1px solid ${a.palette.gray[200]};
76
- color: ${a.palette.gray[300]};
75
+ border: 1px solid ${r.palette.gray[200]};
76
+ color: ${r.palette.gray[300]};
77
77
  cursor: not-allowed;
78
78
  }
79
79
 
80
80
  &:hover:not([disabled]) {
81
- background-color: ${a.palette.primary[500]};
82
- color: ${a.palette.white};
81
+ background-color: ${r.palette.primary[500]};
82
+ color: ${r.palette.white};
83
+ }
84
+ `,
85
+ textLink: `
86
+ background: transparent;
87
+ border: none;
88
+ color: ${r.palette.primary[500]};
89
+ --btn-padding-x: 0;
90
+ --btn-padding-y: 0;
91
+
92
+ &:disabled {
93
+ color: ${r.palette.gray[300]};
94
+ cursor: not-allowed;
95
+ }
96
+
97
+ &:hover:not([disabled]) {
98
+ color: ${r.palette.primary[400]};
99
+ text-decoration: underline;
83
100
  }
84
101
  `
85
102
  })
86
103
  ), c = n(i)`
87
- ${({ theme: a, justify: o, $variant: r }) => `
104
+ ${({ theme: r, justify: o, $variant: a }) => `
88
105
  align-items: center;
89
106
  border-radius: var(--btn-spacing);
90
107
  cursor: pointer;
91
108
  display: inline-flex;
92
- font-family: ${a.typography.type.primary};
93
- font-size: ${a.typography.text.md};
94
- font-weight: ${a.typography.weight.regular};
109
+ font-family: ${r.typography.type.primary};
110
+ font-size: ${r.typography.text.md};
111
+ font-weight: ${r.typography.weight.regular};
95
112
  gap: var(--btn-spacing);
96
113
  justify-content: ${o ?? "center"};
97
- line-height: ${a.spacing[1.25]};
114
+ line-height: ${r.spacing[1.25]};
98
115
  padding: var(--btn-padding-y) var(--btn-padding-x);
99
116
  position: relative;
100
117
  text-align: start;
@@ -105,11 +122,11 @@ const { getVariant: l } = t(
105
122
  text-decoration: underline;
106
123
  }
107
124
 
108
- @media screen and (max-width: ${a.breakpoints.mobile}) {
109
- ${r !== "link" ? `--btn-padding-y: ${a.spacing[1]}` : ""};
125
+ @media screen and (max-width: ${r.breakpoints.mobile}) {
126
+ ${a === "link" || a === "textLink" ? "" : `--btn-padding-y: ${r.spacing[1]}`};
110
127
  }
111
128
 
112
- ${l(a, r ?? "primary")}
129
+ ${l(r, a ?? "primary")}
113
130
  `}
114
131
  `;
115
132
  export {
package/dist/components/button/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ButtonHTMLAttributes } from 'react';
2
2
  import { IBorderModifiable, IDisplayModifiable, IIconModifiable, IMarginModifiable, IPaddingModifiable } from '../@core';
3
3
  import { TPlace } from '../tooltip/types';
4
- type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link";
4
+ type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link" | "textLink";
5
5
  /**
6
6
  * Button component props.
7
7
  * @interface IButtonProps
package/package.json CHANGED
@@ -135,5 +135,5 @@
135
135
  "./dist/index.js"
136
136
  ],
137
137
  "typings": "./dist/index.d.ts",
138
- "version": "8.5.0"
138
+ "version": "8.6.0"
139
139
  }