agroptima-design-system 0.24.1 → 0.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Alert.scss

@@ -11,7 +11,7 @@
   align-items: flex-start;
   border-radius: config.$corner-radius-xxs;
   pointer-events: none;
-  margin: config.$space-4x;
+  margin: 0 config.$space-4x;
 
   &.fit-content {
     width: fit-content;

package/src/atoms/Button/IconButton.tsx

@@ -32,7 +32,7 @@ export function IconButton({
       {...props}
       className={classNames(props.className, 'icon-button', variant)}
     >
-      <Icon name={icon} />
+      <Icon title={accessibilityLabel} name={icon} />
     </BaseButton>
   )
 }

package/src/atoms/Collapsible.scss

@@ -16,14 +16,14 @@
 
   .header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: config.$space-3x;
     padding: config.$space-5x;
     cursor: default;
 
     .icon {
-      width: config.$icon-size-4x;
-      height: config.$icon-size-4x;
+      width: config.$icon-size-4x !important;
+      height: config.$icon-size-4x !important;
       > svg {
         width: 100%;
         height: 100%;
@@ -31,12 +31,15 @@
     }
 
     .title {
+      font-size: 1rem !important;
+      font-weight: normal !important;
       flex: 1;
     }
   }
 
   .content {
     padding: config.$space-7x;
+    padding-bottom: config.$space-3x;
   }
 
   &.primary {

package/src/atoms/DetailItem.scss

@@ -8,6 +8,10 @@
   flex-direction: column;
   margin-bottom: config.$space-3x;
 
+  &.alignment-right {
+    text-align: right;
+  }
+
   .title {
     @include typography.body-bold;
     color: color_alias.$neutral-color-1000;

package/src/atoms/DetailItem.tsx

@@ -3,9 +3,15 @@ import './DetailItem.scss'
 
 export type Variant = 'primary'
 
+export enum Alignment {
+  Left = 'left',
+  Right = 'right',
+}
+
 export interface DetailItemProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
+  align?: Alignment
 }
 
 export function DetailItem({
@@ -13,11 +19,20 @@ export function DetailItem({
   className,
   variant = 'primary',
   title,
+  align = Alignment.Left,
   children,
   ...props
 }: DetailItemProps): React.JSX.Element {
   return (
-    <div className={classNames('detail-item', variant, className)} {...props}>
+    <div
+      className={classNames(
+        'detail-item',
+        variant,
+        `alignment-${align}`,
+        className,
+      )}
+      {...props}
+    >
       <div className="title">{title}</div>
       <div className="information">{children}</div>
     </div>

package/src/atoms/Icon.tsx

@@ -7,6 +7,7 @@ export type IconType = keyof typeof icons
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
   className?: string
+  title?: string
 }
 
 export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
@@ -14,7 +15,7 @@ export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
     rotate: name === 'Loading',
   })
   return (
-    <span role="img" title={name} className={cssClasses}>
+    <span role="img" title={props.title || name} className={cssClasses}>
       {icons[name](props)}
     </span>
   )

package/src/atoms/Modal.scss

@@ -2,6 +2,7 @@
 @use '../settings/typography/content' as typography;
 @use '../settings/config';
 @use '../settings/depth';
+@use '../settings/breakpoints';
 
 .modal-container {
   position: fixed;
@@ -65,6 +66,7 @@
 
     .body {
       @include typography.body-regular-primary;
+      width: 100%;
     }
 
     .footer {
@@ -74,6 +76,14 @@
       margin-top: config.$space-2x;
     }
 
+    &.details {
+      max-width: 50rem;
+      min-height: 400px;
+      max-height: 90vh;
+      overflow-y: auto;
+      overflow-anchor: none;
+    }
+
     &.info {
       .header {
         .icon {
@@ -138,5 +148,13 @@
         }
       }
     }
+
+    // Media queries
+    // Mobile & tablet cases
+    @media only screen and (max-width: breakpoints.$large) {
+      &.details {
+        top: 3rem;
+      }
+    }
   }
 }

package/src/icons/index.tsx

@@ -24,6 +24,7 @@ import Error from './error.svg'
 import Export from './export.svg'
 import Import from './import.svg'
 import Info from './info.svg'
+import Invoice from './invoice.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
 import Minus from './minus.svg'
@@ -67,6 +68,7 @@ export {
   Export,
   Import,
   Info,
+  Invoice,
   Loading,
   Logout,
   Minus,

package/src/icons/invoice.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.71 1.538h7.483a.259.259 0 0 1 .259.257v16.41a.255.255 0 0 1-.259.257H3.806a.259.259 0 0 1-.258-.257V6.667h3.355c.48 0 .939-.19 1.278-.526a1.79 1.79 0 0 0 .529-1.27V1.539Zm-1.549.576L4.127 5.127h2.776a.259.259 0 0 0 .258-.256V2.114ZM6.57.526C6.95.149 7.522 0 7.935 0h8.258c.48 0 .94.19 1.278.526.339.336.529.793.529 1.269v16.41c0 .476-.19.933-.53 1.27a1.813 1.813 0 0 1-1.276.525H3.806c-.479 0-.938-.19-1.277-.526A1.789 1.789 0 0 1 2 18.205V5.897c0-.41.15-.98.53-1.357M6.57.526 2.53 4.54Zm3.688 3.32c0-.425.347-.77.774-.77h3.097c.428 0 .774.345.774.77 0 .425-.346.77-.774.77h-3.097a.772.772 0 0 1-.774-.77Zm0 3.077c0-.425.347-.77.774-.77h3.097c.428 0 .774.345.774.77 0 .425-.346.77-.774.77h-3.097a.772.772 0 0 1-.774-.77ZM5.097 10c0-.425.346-.77.774-.77h8.258c.428 0 .774.345.774.77v6.154c0 .425-.346.77-.774.77H5.871a.772.772 0 0 1-.774-.77V10Zm1.548 3.846v1.539h2.58v-1.539h-2.58Zm2.58-1.538h-2.58v-1.539h2.58v1.539Zm1.55 1.538v1.539h2.58v-1.539h-2.58Zm2.58-1.538h-2.58v-1.539h2.58v1.539Z" fill="#161C26"/></svg>

package/src/stories/Changelog.mdx

@@ -4,6 +4,17 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.24.2
+
+* Fix margin in Alert component.
+* Ensure 100% width on Modal content.
+* On Modal component, add height and scroll.
+* Add Invoice icon.
+* On Collapsible title element, ensure font styles when used in Modal component.
+* DetailItem component now accepts `align` property with `left` or `right` values.
+* Modal maximum width & mobile version properties have been updated.
+* IconButton has updated title value with `accessibilityLabel`.
+
 # 0.24.1
 
 * PDF icon

package/src/stories/Modal.stories.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Modal } from '../atoms/Modal'
 import { DetailItem } from '@/atoms/DetailItem'
+import { Collapsible } from '@/atoms/Collapsible'
 
 const figmaPrimaryDesign = {
   design: {
@@ -151,7 +152,13 @@ export const Details = {
       <DetailItem title="Publisher">
         <a href="#">Squaresoft</a>
       </DetailItem>
-      <DetailItem title="Price">59,95 €</DetailItem>
+      <Collapsible open title="Special Features">
+        <p>RPG genre</p>
+        <p>1 player</p>
+      </Collapsible>
+      <DetailItem style={{ marginTop: '10px' }} align="right" title="Price">
+        59,95 €
+      </DetailItem>
     </Modal>
   ),
 }

package/tests/Pagination.spec.tsx

@@ -79,8 +79,8 @@ describe('Pagination', () => {
     )
 
     expect(getByRole('navigation')).toHaveClass(`pagination`)
-    expect(getByRole('img', { name: 'AngleLeft' })).toBeInTheDocument()
-    expect(getByRole('img', { name: 'AngleRight' })).toBeInTheDocument()
+    expect(getByRole('img', { name: 'Previous page' })).toBeInTheDocument()
+    expect(getByRole('img', { name: 'Next page' })).toBeInTheDocument()
     expect(getByText('1')).toBeInTheDocument()
     expect(getByText('4')).toBeInTheDocument()
     expect(getByText('5')).toBeInTheDocument()