@akad/design-system 1.1.4 → 1.1.7

package/react/src/components/atoms/Progress/Progress.config.d.ts

@@ -1,8 +1,40 @@
 export declare enum ProgressColor {
-    Success = "success",
+    PrimaryDarker = "primary-darker",
+    PrimaryDark = "primary-dark",
+    Primary = "primary",
+    PrimaryLight = "primary-light",
+    PrimaryLighter = "primary-lighter",
+    PrimaryLightest = "primary-lightest",
+    SecondaryDarker = "secondary-darker",
+    SecondaryDark = "secondary-dark",
+    Secondary = "secondary",
+    SecondaryLight = "secondary-light",
+    SecondaryLighter = "secondary-lighter",
+    SecondaryLightest = "secondary-lightest",
+    Neutral90 = "neutral-90",
+    Neutral80 = "neutral-80",
+    Neutral60 = "neutral-60",
+    Neutral40 = "neutral-40",
+    Neutral20 = "neutral-20",
+    Neutral10 = "neutral-10",
+    Neutral05 = "neutral-05",
+    Neutral00 = "neutral-00",
     SuccessDark = "success-dark",
+    Success = "success",
+    SuccessLight = "success-light",
+    SuccessLighter = "success-lighter",
+    WarningDark = "warning-dark",
     Warning = "warning",
-    Danger = "danger"
+    WarningLight = "warning-light",
+    WarningLighter = "warning-lighter",
+    DangerDark = "danger-dark",
+    Danger = "danger",
+    DangerLight = "danger-light",
+    DangerLighter = "danger-lighter",
+    InfoDark = "info-dark",
+    Info = "info",
+    InfoLight = "info-light",
+    InfoLighter = "info-lighter"
 }
 export interface ProgressLabelProps {
     type: StringConstructor;

package/react/src/components/atoms/Progress/Progress.d.ts

@@ -10,7 +10,7 @@ declare const DsProgress: {
     propTypes: {
         label: PropTypes.Requireable<string>;
         progress: PropTypes.Requireable<number>;
-        color: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<import('./Progress.config').ProgressColor>;
     };
 };
 export default DsProgress;

package/react/src/components/atoms/Progress/Progress.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
+import { ProgressColor } from './Progress.config';
 import { DsProgressProps } from '.';
 
 declare const ComponentProps: Meta;
@@ -7,7 +8,10 @@ export declare const Default: {
     render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsProgressProps>;
     args: {
         label: string;
-        color: string;
+        color: ProgressColor;
         progress: number;
     };
 };
+export declare const Colors: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/react/src/components/atoms/SegmentControl/SegmentControl.config.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+
+export declare enum SegmentControlSize {
+    Small = "sm",
+    Medium = "md"
+}
+export interface DsSegmentControlItem {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    testId?: string;
+}
+export interface SegmentControlItemsProps {
+    type: ArrayConstructor;
+    required: true;
+}
+export interface SegmentControlValueProps {
+    type: StringConstructor;
+    required: false;
+}
+export interface SegmentControlDefaultValueProps {
+    type: StringConstructor;
+    required: false;
+}
+export interface SegmentControlSizeProps {
+    type: StringConstructor;
+    default: SegmentControlSize;
+    options: SegmentControlSize[];
+}
+export interface SegmentControlFullWidthProps {
+    type: BooleanConstructor;
+    default: boolean;
+}
+export interface SegmentControlDisabledProps {
+    type: BooleanConstructor;
+    default: boolean;
+}
+export interface SegmentControlClassNameProps {
+    type: StringConstructor;
+    default: string;
+}
+export interface SegmentControlTestIdProps {
+    type: StringConstructor;
+    default: string;
+}
+export interface SegmentControlOnChangeProps {
+    type: FunctionConstructor;
+    default: (value: string, index: number) => void;
+}
+export interface SegmentControlConfig {
+    name: string;
+    class: string;
+    props: {
+        items: SegmentControlItemsProps;
+        value: SegmentControlValueProps;
+        defaultValue: SegmentControlDefaultValueProps;
+        size: SegmentControlSizeProps;
+        fullWidth: SegmentControlFullWidthProps;
+        disabled: SegmentControlDisabledProps;
+        className: SegmentControlClassNameProps;
+        testId: SegmentControlTestIdProps;
+        onChange: SegmentControlOnChangeProps;
+    };
+}
+declare const segmentControlConfig: SegmentControlConfig;
+export default segmentControlConfig;

package/react/src/components/atoms/SegmentControl/SegmentControl.d.ts

@@ -0,0 +1,18 @@
+import { DsSegmentControlItem, SegmentControlSize } from './SegmentControl.config';
+
+export interface DsSegmentControlProps {
+    items: DsSegmentControlItem[];
+    value?: string;
+    defaultValue?: string;
+    name?: string;
+    size?: SegmentControlSize;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+    testId?: string;
+    onChange?: (value: string, index: number) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const DsSegmentControl: import('react').ForwardRefExoticComponent<DsSegmentControlProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DsSegmentControl;

package/react/src/components/atoms/SegmentControl/SegmentControl.stories.d.ts

@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/react';
+import { DsSegmentControlProps } from './SegmentControl';
+import { DsSegmentControlItem, SegmentControlSize } from './SegmentControl.config';
+
+declare const meta: Meta<DsSegmentControlProps>;
+export default meta;
+export declare const Default: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsSegmentControlProps>;
+    args: {
+        items: DsSegmentControlItem[];
+        defaultValue: string;
+        size: SegmentControlSize;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+        'aria-label': string;
+    };
+};
+export declare const Medium: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsSegmentControlProps>;
+    args: {
+        size: SegmentControlSize;
+        items: DsSegmentControlItem[];
+        defaultValue: string;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+        'aria-label': string;
+    };
+};
+export declare const FullWidth: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsSegmentControlProps>;
+    args: {
+        fullWidth: boolean;
+        items: DsSegmentControlItem[];
+        defaultValue: string;
+        size: SegmentControlSize;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+        'aria-label': string;
+    };
+};
+export declare const WithDisabledItem: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsSegmentControlProps>;
+    args: {
+        items: ({
+            value: string;
+            label: string;
+            disabled?: undefined;
+        } | {
+            value: string;
+            label: string;
+            disabled: boolean;
+        })[];
+        defaultValue: string;
+        size: SegmentControlSize;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+        'aria-label': string;
+    };
+};
+export declare const FullyDisabled: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsSegmentControlProps>;
+    args: {
+        disabled: boolean;
+        items: DsSegmentControlItem[];
+        defaultValue: string;
+        size: SegmentControlSize;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+        'aria-label': string;
+    };
+};
+export declare const Controlled: {
+    render: (args: DsSegmentControlProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        items: DsSegmentControlItem[];
+        'aria-label': string;
+    };
+};

package/react/src/components/atoms/SegmentControl/SegmentControl.test.d.ts

@@ -0,0 +1 @@
+export {};

package/react/src/components/atoms/SegmentControl/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SegmentControl';
+export * from './SegmentControl.config';
+export { default as DsSegmentControl } from './SegmentControl';
+export { default as segmentControlConfig } from './SegmentControl.config';

package/react/src/components/atoms/SegmentControl/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/scss/core/components/atoms/progress.scss

@@ -13,20 +13,4 @@
     transition: 0.2s ease all;
     width: 100%;
   }
-
-  &__progress--danger {
-    background-color: var(--color__danger);
-  }
-
-  &__progress--success {
-    background-color: var(--color__success);
-  }
-
-  &__progress--success-dark {
-    background-color: var(--color__success--dark);
-  }
-
-  &__progress--warning {
-    background-color: var(--color__warning);
-  }
 }

package/scss/core/components/atoms/segment-control.scss

@@ -0,0 +1,143 @@
+// === SEGMENT CONTROL TOKENS ===
+$segment-control__padding: $spacing__inset--quark !default;
+$segment-control__gap: $spacing--quark !default; // 4px
+$segment-control__border-radius: $border__radius--md !default;
+$segment-control__item-radius: $border__radius--sm !default;
+$segment-control__padding-y--sm: $spacing__inset--quark !default;
+$segment-control__padding-x--sm: $spacing__inset--xs !default;
+$segment-control__padding-y--md: $spacing__inset--nano !default;
+$segment-control__padding-x--md: $spacing__inset--sm !default;
+$segment-control__transition: 150ms ease-in-out !default;
+
+// === SEGMENT CONTROL COMPONENT ===
+.ds-segment-control {
+  --segment-control__background-track: var(--color__neutral--20);
+  --segment-control__background-item: transparent;
+  --segment-control__background-item--hover: var(--color__neutral--30);
+  --segment-control__background-item--active: var(--color__neutral--00);
+  --segment-control__color-item: var(--color__neutral--90);
+  --segment-control__color-item--hover: var(--color__neutral--90);
+  --segment-control__color-item--active: var(--color__primary);
+  --segment-control__color-item--disabled: var(--color__neutral--50);
+  --segment-control__shadow-item--active: #{$shadow__level--1};
+
+  background-color: var(--segment-control__background-track);
+  border-radius: $segment-control__border-radius;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--font__family--highlight);
+  gap: $segment-control__gap;
+  max-width: 100%;
+  overflow: hidden;
+  padding: $segment-control__padding;
+  width: fit-content;
+
+  &--full-width {
+    display: flex;
+    flex: 1 0 100%;
+    width: 100%;
+  }
+
+  .ds-segment-control__item {
+    align-items: center;
+    appearance: none;
+    background-color: var(--segment-control__background-item);
+    border: 0;
+    border-radius: $segment-control__item-radius;
+    box-sizing: border-box;
+    color: var(--segment-control__color-item);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-family: inherit;
+    font-size: $font__size--xs;
+    font-weight: $font__weight--medium;
+    justify-content: center;
+    letter-spacing: 0;
+    line-height: 1.4;
+    margin: 0;
+    position: relative;
+    text-align: center;
+    transition:
+      background-color $segment-control__transition,
+      color $segment-control__transition,
+      box-shadow $segment-control__transition;
+    user-select: none;
+    white-space: nowrap;
+    width: auto;
+    z-index: 0;
+
+    &:hover:not(
+        .ds-segment-control__item--active,
+        .ds-segment-control__item--disabled
+      ) {
+      background-color: var(--segment-control__background-item--hover);
+      color: var(--segment-control__color-item--hover);
+      z-index: 1;
+    }
+
+    &--active {
+      background-color: var(--segment-control__background-item--active);
+      box-shadow: var(--segment-control__shadow-item--active);
+      color: var(--segment-control__color-item--active);
+      z-index: 2;
+    }
+
+    &:has(.ds-segment-control__item-input:focus-visible) {
+      outline: $border__width--thin solid var(--color__primary);
+      outline-offset: $border__width--thin;
+      z-index: 3;
+    }
+
+    &--disabled {
+      color: var(--segment-control__color-item--disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .ds-segment-control__item-input {
+    appearance: none;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // Sizes
+  &--size-sm {
+    min-height: $spacing--xs;
+
+    .ds-segment-control__item {
+      padding: $segment-control__padding-y--sm $segment-control__padding-x--sm;
+    }
+  }
+
+  &--size-md {
+    min-height: $spacing--sm;
+
+    .ds-segment-control__item {
+      padding: $segment-control__padding-y--md $segment-control__padding-x--md;
+    }
+  }
+
+  &--full-width .ds-segment-control__item {
+    flex: 1 1 0;
+    width: auto;
+  }
+}
+
+// Dark mode
+[data-theme='dark'] .ds-segment-control {
+  --segment-control__background-track: var(--color__neutral--80);
+  --segment-control__background-item--hover: var(--color__neutral--70);
+  --segment-control__background-item--active: var(--color__primary);
+  --segment-control__color-item: var(--color__neutral--10);
+  --segment-control__color-item--hover: var(--color__neutral--00);
+  --segment-control__color-item--active: var(--color__neutral--00);
+  --segment-control__color-item--disabled: var(--color__neutral--50);
+}

package/scss/core/components/index.scss

@@ -23,6 +23,7 @@
 @import 'atoms/paragraph';
 @import 'atoms/progress';
 @import 'atoms/radio';
+@import 'atoms/segment-control';
 @import 'atoms/select';
 @import 'atoms/subtitle';
 @import 'atoms/textarea';