Merge branch 'deploy' into pagination

components/bread-crumb/src/bread-crumb.module.scss

@@ -9,7 +9,21 @@
 
   li {
     display: inline-block;
-    line-height: 1em;
+    padding: size('0.5x') size('1x') size('0.5x') size('1x');
+    font-size: font-size('small');
+    font-weight: 500;
+    background-color: color('white');
+    border-radius: radius('breadcrumb');
+
+    &:hover {
+      color: color('primary-140');
+      background-color: color('primary-10');
+    }
+
+    &:focus {
+      color: color('primary-180');
+      background-color: color('primary-20');
+    }
   }
 }
 
@@ -24,28 +38,26 @@
 .page,
 .page a {
   color: color('primary');
-
-  @include typography('paragraph');
-
   text-decoration: none;
 }
 
 .page:last-child,
 .page:last-child a {
-  color: color('text-dark');
+  color: color('background-50');
   pointer-events: none;
+  background: none;
 }
 
 .page + .page::before {
   position: absolute;
   bottom: 0;
   left: -1em;
   display: inline-block;
-  padding: 2px;
+  padding: size('0.5x');
   content: ' ';
   border-color: color('text-dark');
   border-style: solid;
   border-width: 0 1px 1px 0;
   opacity: 0.6;
-  transform: translateY(-50%) rotate(-45deg);
+  transform: translateY(-125%) rotate(-45deg);
 }

components/input-select/src/input-select.tsx

@@ -273,27 +273,33 @@ export default class InputSelect<Value = any, Option = any> extends Component<
               onKeyDown={this.handleKeyDown}
               data-test-id="control"
             >
-              <div className={classnames('button')}>
-                {this.props.isLoading ? (
+              {this.props.isLoading ? (
+                <div className={classnames('button')}>
                   <Icon
                     className={classnames('state-icon')}
                     name={SpinnerSolid}
                     title="loading options"
                     spin
                     data-test-id="loading"
                   />
-                ) : (
-                  <Icon
-                    className={classnames('state-icon')}
-                    title={this.state.isOpen ? 'close' : 'open'}
-                    name={this.state.isOpen ? ChevronUpSolid : ChevronDownSolid}
-                    onClick={(event) =>
-                      this.state.isOpen && event.stopPropagation()
-                    }
-                    data-test-id="chevron"
-                  />
-                )}
-              </div>
+                </div>
+              ) : (
+                !this.props.value && (
+                  <div className={classnames('button')}>
+                    <Icon
+                      className={classnames('state-icon')}
+                      title={this.state.isOpen ? 'close' : 'open'}
+                      name={
+                        this.state.isOpen ? ChevronUpSolid : ChevronDownSolid
+                      }
+                      onClick={(event) =>
+                        this.state.isOpen && event.stopPropagation()
+                      }
+                      data-test-id="chevron"
+                    />
+                  </div>
+                )
+              )}
             </InputSelectControl>
           </div>
         )}

components/progress/docs/Overview.mdx

@@ -5,7 +5,7 @@
 
 ```preview
 return (
-    <Progress type="bar" appearance="info" value={25}/>
+    <Progress type="bar" types="stripes" movement = "continuous" size="20" appearance="info" value={25}/>
 )
 ```
 
@@ -48,10 +48,10 @@ return (
 ```preview
 return (
     <>
-    <Progress type="bar" appearance="success" value={20} style={{ marginBottom: '16px' }} />
-    <Progress type="bar" appearance="info" value={30} style={{ marginBottom: '16px' }} />
-    <Progress type="bar" appearance="warning" value={40} style={{ marginBottom: '16px' }} />
-    <Progress type="bar" appearance="danger" value={50} />
+    <Progress type="bar" types="stripes" appearance="success" value={20} style={{ marginBottom: '16px' }} />
+    <Progress type="bar" types="stripes"  appearance="info" value={30} style={{ marginBottom: '16px' }} />
+    <Progress type="bar" types="stripes"  appearance="warning" value={40} style={{ marginBottom: '16px' }} />
+    <Progress type="bar" types="stripes"  appearance="danger" value={50} />
     </>
 )
 ```

components/progress/src/progress-bar.module.scss

@@ -6,22 +6,22 @@
   width: 100%;
   border-radius: 100px;
 
-  --u-progress-size: 8px;
+  --u-progress-size: size('2x');
 
   &.small {
-    --u-progress-size: 4px;
+    --u-progress-size: size('1x');
   }
 
   &.medium {
-    --u-progress-size: 16px;
+    --u-progress-size: size('4x');
   }
 
   &.large {
-    --u-progress-size: 32px;
+    --u-progress-size: size('8x');
   }
 
   .title {
-    margin-bottom: 8px;
+    margin-bottom: size('2x');
   }
 
   .background {
@@ -32,6 +32,54 @@
     @include border-radius('button');
   }
 
+  .stripes-back {
+    position: relative;
+    width: var(--custom-width);
+    height: 100%;
+    background-color: var(--u-progress-color);
+
+    @include border-radius('button');
+  }
+
+  .stripes-fore {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+      45deg,
+      var(--u-stripes-color) 25%,
+      transparent 25%,
+      transparent 50%,
+      var(--u-stripes-color) 50%,
+      var(--u-stripes-color) 75%,
+      transparent 75%
+    );
+    background-size: 40px 40px;
+
+    @include border-radius('button');
+  }
+
+  .continuous {
+    animation: moveColoredRegion 6s linear infinite;
+  }
+
+  @keyframes moveColoredRegion {
+    0% {
+      left: 0;
+      animation-direction: normal;
+    }
+    50% {
+      left: var(--movement-width);
+      animation-direction: reverse;
+    }
+    100% {
+      left: 0;
+      animation-direction: normal;
+    }
+  }
+
   .foreground {
     height: 100%;
     background-color: var(--u-progress-color);
@@ -46,16 +94,20 @@
 
 .info {
   --u-progress-color: #{color('primary')};
+  --u-stripes-color: #{color('primary-60')};
 }
 
 .success {
   --u-progress-color: #{color('success')};
+  --u-stripes-color: #{color('success-40')};
 }
 
 .warning {
   --u-progress-color: #{color('warning')};
+  --u-stripes-color: #{color('warning-40')};
 }
 
 .danger {
   --u-progress-color: #{color('danger')};
+  --u-stripes-color: #{color('danger-40')};
 }

components/progress/src/progress-bar.tsx

@@ -23,6 +23,18 @@ export interface Props extends BaseProps {
    * @since 0.11.0
    */
   size?: 'small' | 'medium' | 'large'
+  /**
+   * Stripe or regular type of progress bar.
+   *
+   * @since 0.11.0
+   */
+  types?: 'stripes' | 'regular'
+  /**
+   * movement of progress bar.
+   *
+   * @since 0.11.0
+   */
+  movement?: 'continuous' | 'static'
 }
 
 export default function ProgressBar({
@@ -34,6 +46,8 @@ export default function ProgressBar({
   children,
   size,
   showValue,
+  types = 'regular',
+  movement = 'static',
   ...props
 }: Props) {
   return (
@@ -49,10 +63,24 @@ export default function ProgressBar({
         <div className={classnames('title')}>{children || title}</div>
       ) : null}
       <div className={classnames('background')}>
-        <div
-          className={classnames('foreground')}
-          style={{ width: `${Math.min(100, value)}%` }}
-        />
+        {types === 'stripes' ? (
+          <div
+            className={classnames('stripes-back', movement)}
+            style={
+              {
+                '--custom-width': `${Math.min(100, value)}%`,
+                '--movement-width': `${Math.abs(100 - value)}%`,
+              } as React.CSSProperties
+            }
+          >
+            <div className={classnames('stripes-fore')} />
+          </div>
+        ) : (
+          <div
+            className={classnames('foreground')}
+            style={{ width: `${Math.min(100, value)}%` }}
+          />
+        )}
       </div>
       {showValue && <T className={classnames('value')}>{value}%</T>}
     </div>
@@ -61,4 +89,6 @@ export default function ProgressBar({
 
 ProgressBar.defaultProps = {
   appearance: 'success',
+  types: 'regular',
+  movement: 'static',
 }

components/stepper/src/small-step.module.scss

@@ -4,9 +4,13 @@
   $self: &;
 
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  height: 100%;
+
+  min-width: size('3x') * 10;
+  min-height: size('3x') * 10;
+
+
   &:first-child {
     #{ $self }__left-separator {
       flex: 1 1 100%;
@@ -23,7 +27,7 @@
     display: block !important;
     &:hover {
       #{ $self }__indicator {
-        transform: translate(-50%, -50%) #{scale }(0.7);
+        transform: translate(-50%, -50%) #{scale}(0.7);
       }
       #{ $self }__label {
         display: flex;
@@ -45,29 +49,38 @@
     box-shadow: shadow('stepper');
     transform: translate(-50%, -50%) #{scale }(0.5);
     transform-origin: center center;
+
+    &--horizontal {
+      top: -1px;
+    }
+    &--vertical {
+      top: size('3x');
+      left: -1px;
+    }
   }
   &__label {
-    position: absolute;
-    bottom: 0;
-    left: -50px;
     display: none;
-    width: 160px;
-    padding: 12px;
-    margin-bottom: 16px;
+    min-width: 160px;
+    padding: 0 size('3x');
+    margin-bottom: size('4x');
     background: color('black');
     &::after {
       position: absolute;
       bottom: 0;
       left: 50px;
       content: '';
-      border: 8px solid;
+      border: size('2x') solid;
       border-color: color('black') transparent transparent transparent;
       transform: translate(-50%, 100%);
     }
     &--always-open {
       display: flex;
     }
+    &--heading {
+      margin-top: 0 !important;
+    }
   }
+
   &--vertical {
     flex-direction: column;
     #{ $self }__label {
@@ -76,7 +89,6 @@
       display: flex;
       margin-bottom: 0;
       background: transparent;
-      transform: translateY(50%);
       &::after {
         content: none;
       }