@indico-data/design-system 2.4.2 → 2.6.0

package/src/components/forms/radio/styles/Radio.scss

@@ -0,0 +1,98 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-radio-background-color: var(--pf-white-color);
+  --pf-radio-check-color: var(--pf-primary-color);
+  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-400);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-radio-background-color: transparent;
+  --pf-radio-check-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control {
+  .radio-wrapper {
+    display: flex;
+    margin-bottom: var(--pf-margin-2);
+    align-items: center;
+  }
+  .radio-input {
+    margin: 0;
+    margin-right: var(--pf-margin-2);
+    cursor: pointer;
+  }
+  .radio-input-label {
+    cursor: pointer;
+  }
+  [type='radio']:checked,
+  [type='radio']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='radio']:checked + label,
+  [type='radio']:not(:checked) + label {
+    position: relative;
+    padding-left: var(--pf-padding-7);
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+  }
+  [type='radio']:checked + label:before,
+  [type='radio']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--pf-radio-border-color);
+    border-radius: 100%;
+    background: var(--pf-radio-background-color);
+  }
+  [type='radio']:checked + label:after,
+  [type='radio']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: var(--pf-radio-check-color);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='radio']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='radio']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  [type='radio']:disabled,
+  [type='radio']:disabled + label {
+    cursor: not-allowed;
+  }
+
+  [type='radio']:disabled + label {
+    color: var(--pf-radio-disabled-color);
+    opacity: 0.5;
+  }
+
+  [type='radio']:disabled + label:before {
+    border-color: var(--pf-radio-disabled-color);
+  }
+
+  [type='radio']:disabled + label:after {
+    background: var(--pf-radio-disabled-color);
+  }
+}

package/src/components/forms/subcomponents/ErrorList.tsx

@@ -0,0 +1,14 @@
+interface ErrorListProps {
+  name: string;
+  errorList: string[];
+}
+
+export const ErrorList = ({ errorList, name }: ErrorListProps) => {
+  return (
+    <ul className="error-list" id={`${name}-helper`}>
+      {(errorList ?? []).map((error, index) => (
+        <li key={index}>{error}</li>
+      ))}
+    </ul>
+  );
+};

package/src/components/forms/subcomponents/Label.tsx

@@ -0,0 +1,20 @@
+interface LabelProps {
+  label: string;
+  name: string;
+  isRequired?: boolean;
+  hasHiddenLabel?: boolean;
+}
+
+export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => {
+  return (
+    <div
+      data-testid={`${name}-testId`}
+      className={`form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`}
+    >
+      <label htmlFor={`${name}`}>
+        {label}
+        {isRequired ? <span className="text-error"> *</span> : ''}
+      </label>
+    </div>
+  );
+};

package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { ErrorList } from '@/components/forms/subcomponents/ErrorList';
+
+describe('ErrorList', () => {
+  it('renders the error list', () => {
+    render(<ErrorList name="name" errorList={['error1', 'error2']} />);
+    expect(screen.getByText('error1')).toBeInTheDocument();
+    expect(screen.getByText('error2')).toBeInTheDocument();
+  });
+
+  it('does not render the error list when it is empty', () => {
+    render(<ErrorList name="name" errorList={[]} />);
+    expect(screen.queryByText('error1')).not.toBeInTheDocument();
+    expect(screen.queryByText('error2')).not.toBeInTheDocument();
+  });
+});

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { Label } from '@/components/forms/subcomponents/Label';
+
+describe('Label', () => {
+  it('renders the `required` astherisc when the label is required', () => {
+    render(<Label label={'name'} name={'name'} isRequired={true} hasHiddenLabel={false} />);
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeVisible();
+  });
+  it('does not render the `required` astherisc when the label is not required', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+    expect(screen.queryByText('*')).toBeNull();
+  });
+  it('renders the label for screen readers while hidden visually', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('name')).toBeVisible();
+  });
+  it('renders the label text', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    const label = screen.getByTestId('name-testId');
+    expect(label).toBeInTheDocument();
+    expect(label).toBeVisible();
+    expect(label).not.toHaveClass('is-visually-hidden');
+  });
+
+  it('renders the label text when the label is hidden', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+    const label = screen.getByTestId('name-testId');
+    expect(label).toHaveClass('is-visually-hidden');
+  });
+});

package/src/components/index.ts

@@ -2,3 +2,5 @@ export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
 export { Table } from './table';
+export { Input } from './forms/input';
+export { Radio } from './forms/radio';

package/src/index.ts

@@ -61,3 +61,5 @@ export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
 export { Table } from './components/table';
+export { Input } from './components/forms/input';
+export { Radio as RadioInput } from './components/forms/radio';

package/src/styles/_typography.scss

@@ -5,14 +5,17 @@ html {
   font-family: var(--pf-font-family-base);
 }
 // Font Sizing and Family
-@each $tag, $size in (
-  h1: --pf-font-size-h1,
-  h2: --pf-font-size-h2,
-  h3: --pf-font-size-h3,
-  h4: --pf-font-size-h4,
-  h5: --pf-font-size-h5,
-  p: --pf-font-size-body) {
-
+@each $tag,
+  $size
+    in (
+      h1: --pf-font-size-h1,
+      h2: --pf-font-size-h2,
+      h3: --pf-font-size-h3,
+      h4: --pf-font-size-h4,
+      h5: --pf-font-size-h5,
+      p: --pf-font-size-body
+    )
+{
   #{$tag},
   .text-#{$tag} {
     font-size: var(#{$size});
@@ -21,9 +24,8 @@ html {
     padding: 0;
 
     // If the tag is not 'p', make it bold
-    @if $tag !='p' {
+    @if $tag != 'p' {
       font-weight: var(--pf-font-weight-bold);
-
     }
   }
 }
@@ -46,7 +48,6 @@ html {
   font-size: var(--pf-font-size-overine);
 }
 
-
 // Transform
 .text-capitalize {
   text-transform: capitalize;
@@ -114,3 +115,20 @@ html {
 .text-break--word {
   overflow-wrap: break-word;
 }
+
+// Text Colors
+.text-error {
+  color: var(--pf-error-color);
+}
+
+.text-warning {
+  color: var(--pf-warning-color);
+}
+
+.text-success {
+  color: var(--pf-success-color);
+}
+
+.text-info {
+  color: var(--pf-info-color);
+}

package/src/styles/index.scss

@@ -6,6 +6,8 @@
 @import '../components/icons/styles/Icon.scss';
 @import '../components/grid/styles/Grid.scss';
 @import '../components/table/styles/Table.scss';
+@import '../components/forms/input/styles/Input.scss';
+@import '../components/forms/radio/styles/Radio.scss';
 
 @import 'typography';
 @import 'colors';

package/src/styles/storybook.scss

@@ -0,0 +1,15 @@
+:root [data-theme='light'],
+:root {
+  --storybook-bg-color: var(--pf-white-color);
+  --storybook-font-color: var(--pf-gray-color);
+}
+
+:root [data-theme='dark'] {
+  --storybook-bg-color: var(--pf-primary-color-300);
+  --storybook-font-color: var(--pf-white-color);
+}
+
+.sb__story {
+  background-color: var(--storybook-bg-color);
+  color: var(--storybook-font-color);
+}