@orangesk/orange-design-system 1.10.6 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "1.10.6",
+  "version": "1.11.1",
   "private": false,
   "engines": {
     "node": ">=18.x"

package/src/components/CarouselPromotions/CarouselPromotions.mdx

@@ -14,65 +14,47 @@ import phones from '../../assets/images/developers/phones.png';
 import { defaultConfig } from './CarouselPromotions.static.js';
 import Icon from '../Icon';
 
-export const SlideExample = ({ num, ...props }) => (
-  <React.Fragment {...props}>
-    {num % 2 === 0 ? (
-      <CarouselPromotionsItem
-        {...props}
-        image={<Image src={phones} alt="Two phones" />}
-        title="Online ochrana pre váš digitálny svet"
-        subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
-      />
-    ) : (
-      <CarouselPromotionsItem
-        {...props}
-        image={<Image src={phones} alt="iPhone image" />}
-        title="Online ochrana pre váš digitálny svet"
-        subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
-      />
-    )}
-  </React.Fragment>
+export const SlideExample = ({ ...props }) => (
+  <CarouselPromotionsItem
+    {...props}
+    image={<Image src={phones} alt="Two phones" />}
+    title="Online ochrana pre váš digitálny svet"
+    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
+  />
 );
 
 export const SlideExamplePictureTag = ({ num, ...props }) => (
-  <React.Fragment {...props}>
-    {num % 2 === 0 ? (
-      <CarouselPromotionsItem
-        {...props}
-        image={
-          <Image
-            src={{
-              default: phones,
-              lg: phones,
-            }}
-            alt="Two phones"
-          />
-        }
-        title="Online ochrana pre váš digitálny svet"
-        subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
+  <CarouselPromotionsItem
+    {...props}
+    image={
+      <Image
+        src={{
+          default: phones,
+          lg: phones,
+        }}
+        alt="Two phones"
       />
-    ) : (
-      <CarouselPromotionsItem
-        {...props}
-        image={
-          <Image
-            src={{
-              default: phones,
-              lg: phones,
-            }}
-            alt="iPhone image"
-          />
-        }
-        title="Končí vám viazanosť. Čas na nový telefón!"
-        subtitle="Vyberte si nové zariadenie s bonusom až do 440 €. "
-      />
-    )}
-  </React.Fragment>
+    }
+    title="Online ochrana pre váš digitálny svet"
+    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
+  />
 );
 
 export const imageItems = Array(4)
   .fill()
-  .map((_, index) => <SlideExample key={index.toString()} num={index} />);
+  .map((_, index) => (
+    <SlideExample
+      key={index.toString()}
+      num={index}
+      color={index === 0 && 'black'}
+    />
+  ));
+
+export const imageDarkItems = Array(4)
+  .fill()
+  .map((_, index) => (
+    <SlideExample key={index.toString()} color={index === 0 && 'black'} />
+  ));
 
 export const imageItemsWithHref = Array(4)
   .fill()
@@ -81,13 +63,17 @@ export const imageItemsWithHref = Array(4)
       key={index.toString()}
       num={index}
       href={'#carousel-for-promotions'}
+      color={index === 0 && 'black'}
     />
   ));
 
 export const imageItemsWithPicture = Array(4)
   .fill()
   .map((_, index) => (
-    <SlideExamplePictureTag key={index.toString()} num={index} />
+    <SlideExamplePictureTag
+      key={index.toString()}
+      color={index === 0 && 'black'}
+    />
   ));
 
 # Carousel for promotions
@@ -102,7 +88,7 @@ export const imageItemsWithPicture = Array(4)
 
 <Preview>
   <CarouselPromotions isInverse id="carousel-dark">
-    {imageItems}
+    {imageDarkItems}
   </CarouselPromotions>
 </Preview>
 

package/src/components/CarouselPromotions/CarouselPromotionsItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { element, string, node } from 'prop-types';
+import { element, string, node, oneOf } from 'prop-types';
 
 import {
   CLASS_SLIDE,
@@ -17,6 +17,7 @@ const propTypes = {
   image: element,
   subtitle: string,
   title: string,
+  color: oneOf(['black']),
 };
 
 const CarouselPromotionsItem = ({
@@ -26,9 +27,14 @@ const CarouselPromotionsItem = ({
   image,
   title,
   subtitle,
+  color,
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className);
+  const classes = cx(
+    CLASS_ROOT,
+    { [`${CLASS_ROOT}--black`]: color === 'black' },
+    className
+  );
 
   const Tag = href ? 'a' : 'div';
 

package/src/components/CarouselPromotions/styles/mixins.scss

@@ -95,14 +95,12 @@
 
 @mixin slide-base {
   display: flex;
-  gap: space.get('small');
   max-width: 100%;
   flex: 0 0 auto;
-  padding: space.get('small');
   user-select: none;
   background-color: color.$white;
 
-  &:nth-child(2n) {
+  &--black {
     background-color: color.$black;
     color: color.$white !important;
   }
@@ -112,16 +110,10 @@
   }
 
   @include breakpoint.get('md') {
-    padding: space.get('medium') convert.to-rem(50px) space.get('medium')
-      space.get('medium');
     flex-direction: row-reverse;
     justify-content: space-between;
   }
 
-  @include breakpoint.get('lg') {
-    padding-right: convert.to-rem(100px);
-  }
-
   &:is(a) {
     cursor: pointer;
     &,
@@ -134,11 +126,11 @@
 }
 
 @mixin slide-base-inverse {
-  background-color: color.$black;
+  color: color.$black !important;
 
-  &:nth-child(2n) {
-    background-color: color.$white;
-    color: color.$black !important;
+  &--black {
+    background-color: color.$black;
+    color: color.$white !important;
   }
 }
 
@@ -147,6 +139,7 @@
   height: convert.to-rem(100px);
   display: flex;
   flex-shrink: 0;
+  margin: space.get('small');
 
   picture,
   img {
@@ -168,6 +161,7 @@
     background-color: unset;
     justify-content: end;
     position: relative;
+    margin: 0 convert.to-rem(50px) 0 0;
 
     img,
     picture {
@@ -180,6 +174,7 @@
   @include breakpoint.get('lg') {
     width: convert.to-rem(200px);
     height: convert.to-rem(200px);
+    margin-right: convert.to-rem(100px);
 
     img,
     picture {
@@ -215,6 +210,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding: space.get('small') space.get('small') space.get('small') 0;
 
   > *:last-child {
     margin-bottom: 0;
@@ -224,46 +220,10 @@
     height: 100%;
     max-width: convert.to-rem(545px);
     justify-content: space-between;
+    padding: space.get('medium');
   }
 }
 
-@mixin button-base {
-  @include button-mixins.base(button-config.$base);
-  @include button-mixins.style(config.$button);
-  @include button-mixins.square-base();
-  @include button-mixins.square-size('default');
-
-  position: absolute;
-  top: 50%;
-  z-index: 10;
-  margin: 0;
-  border-radius: 100%;
-}
-
-@mixin button-slide-inverted {
-  color: color.$white;
-}
-
-@mixin button-slide-inverted-inverse {
-  color: color.$black;
-}
-
-@mixin button-next {
-  width: config.$button-size !important;
-  height: config.$button-size !important;
-  right: space.get('small');
-  border: 0 !important;
-  transform: translateY(-50%);
-}
-
-@mixin button-disabled {
-  @include generate.css-map(sass-map.get(button-config.$base, 'disabled'));
-}
-
-@mixin button-inverse {
-  @include button-mixins.style(config.$button-inverse);
-}
-
 @mixin pagination {
   user-select: none;
   display: flex;

package/src/components/CarouselPromotions/styles/style.scss

@@ -35,27 +35,6 @@
     @include mixins.slide-content;
   }
 
-  &__next {
-    @include mixins.button-next;
-    @include mixins.button-base;
-
-    &.is-disabled {
-      @include mixins.button-disabled;
-    }
-  }
-
-  .bg-black &__next {
-    @include mixins.button-inverse;
-  }
-
-  &--slide-inverted &__next {
-    @include mixins.button-slide-inverted;
-  }
-
-  &--slide-inverted.bg-black &__next {
-    @include mixins.button-slide-inverted-inverse;
-  }
-
   &__pagination {
     @include mixins.pagination;
   }

package/src/components/Forms/TextArea/TextArea.mdx

@@ -69,7 +69,7 @@ export const widths = {
 ### Default
 
 <Preview>
-  <TextArea id="input-example" />
+  <TextArea id="input-example" placeholder="Placeholder text" />
 </Preview>
 
 ### Disabled

package/src/components/Forms/TextArea/styles/config.scss

@@ -3,6 +3,7 @@
 @use '../../styles/config' as commonConfig;
 
 $base: (
+  font-weight: bold,
   border-radius: 0,
 );
 

package/src/components/Forms/TextInput/TextInput.mdx

@@ -113,7 +113,7 @@ export const widths = {
 ### Default
 
 <Preview>
-  <TextInput id="input-example" />
+  <TextInput id="input-example" placeholder="Placeholder text" />
 </Preview>
 
 ### Disabled