agroptima-design-system 1.2.38 → 1.2.39-beta.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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/CardsTable/CardsTable.scss +8 -0
  3. package/src/atoms/CardsTable/CardsTableHeader.tsx +9 -1
  4. package/src/stories/Changelog.mdx +4 -0
  5. package/tests/CardsTable.spec.tsx +19 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "1.2.38",
3
+ "version": "1.2.39-beta.0",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/CardsTable/CardsTable.scss CHANGED
@@ -144,6 +144,14 @@
144
144
  @media only screen and (max-width: breakpoints.$large) {
145
145
  .cards-table-head {
146
146
  display: none;
147
+
148
+ &:has(.desktop-only) {
149
+ display: table-header-group;
150
+
151
+ .cards-table-row {
152
+ display: table-row;
153
+ }
154
+ }
147
155
  }
148
156
 
149
157
  .cards-table-row {
package/src/atoms/CardsTable/CardsTableHeader.tsx CHANGED
@@ -4,6 +4,7 @@ import { Alignment } from './CardsTableCell'
4
4
  export interface CardsTableHeaderProps extends React.ComponentPropsWithoutRef<'th'> {
5
5
  align?: Alignment
6
6
  actions?: boolean
7
+ desktopOnly?: boolean
7
8
  }
8
9
 
9
10
  export function CardsTableHeader({
@@ -11,10 +12,17 @@ export function CardsTableHeader({
11
12
  className,
12
13
  align = Alignment.Left,
13
14
  actions = false,
15
+ desktopOnly = false,
14
16
  ...props
15
17
  }: CardsTableHeaderProps) {
16
18
  return (
17
- <th role="columnheader" className="cards-table-header" {...props}>
19
+ <th
20
+ role="columnheader"
21
+ className={classNames('cards-table-header', {
22
+ 'desktop-only': desktopOnly,
23
+ })}
24
+ {...props}
25
+ >
18
26
  <div
19
27
  className={classNames(
20
28
  'cards-table-inner-cell',
package/src/stories/Changelog.mdx CHANGED
@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
+ ## 1.2.39
8
+
9
+ * Add `desktopOnly` prop to CardsTableHeader
10
+
7
11
  ## 1.2.38
8
12
 
9
13
  * Add CheckboxWithDivider component
package/tests/CardsTable.spec.tsx CHANGED
@@ -128,4 +128,23 @@ describe('CardsTable', () => {
128
128
  expect(getAllByRole('row').length).toBeGreaterThan(1)
129
129
  expect(getAllByRole('cell').length).toBeGreaterThan(1)
130
130
  })
131
+
132
+ it('marks a header as desktop-only', () => {
133
+ const { getByRole } = render(
134
+ <CardsTable>
135
+ <CardsTableHead>
136
+ <CardsTableRow>
137
+ <CardsTableHeader desktopOnly>Game title</CardsTableHeader>
138
+ </CardsTableRow>
139
+ </CardsTableHead>
140
+ <CardsTableBody>
141
+ <CardsTableRow>
142
+ <CardsTableCell>Tekken 8</CardsTableCell>
143
+ </CardsTableRow>
144
+ </CardsTableBody>
145
+ </CardsTable>,
146
+ )
147
+
148
+ expect(getByRole('columnheader').className).toContain('desktop-only')
149
+ })
131
150
  })