@orangesk/orange-design-system 2.0.0-beta.5 → 2.0.0-beta.7

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

@@ -11,7 +11,7 @@
   top: 0;
   z-index: 100;
   background-color: var(--color-background-primary) !important;
-  padding: space.get("large") 0;
+  border-bottom: 1px solid var(--color-border-subtle);
 
   // Štýly pre Grid s horizontal-scroll
   .horizontal-scroll {
@@ -67,16 +67,8 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 convert.to-rem(70px);
-
-  @include breakpoint.get("xl", "down") {
-    padding: 0 convert.to-rem(42px);
-  }
 
   @include breakpoint.get("xs", "down") {
-    padding: 0 convert.to-rem(10px);
-    border-bottom: none;
     overflow: hidden;
     flex-direction: column;
   }
@@ -84,7 +76,6 @@
 
 @mixin anchor-navigation-content-left() {
   @include breakpoint.get("xs", "down") {
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
   }
 }
@@ -119,7 +110,6 @@
       display: none;
     }
     padding: space.get("small") 0;
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
     justify-content: space-between;
   }

package/src/components/Card/Card.tsx

@@ -1,7 +1,20 @@
 import React from "react";
 import cx from "classnames";
 
-export const cardColors = ["white", "black", "orange"] as const;
+export const cardColors = [
+  "white",
+  "black",
+  "orange",
+  "gray",
+  "blue",
+  "green",
+  "pink",
+  "yellow",
+  "violet",
+  "accent1-blog",
+  "accent2-blog",
+  "accent",
+] as const;
 export type CardColor = (typeof cardColors)[number];
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/Card/CardSection.tsx

@@ -1,16 +1,8 @@
 import React from "react";
 import cx from "classnames";
+import { cardColors } from "./Card";
 
-export const cardSectionColors = [
-  "orange",
-  "gray",
-  "blue",
-  "green",
-  "pink",
-  "yellow",
-  "violet",
-] as const;
-export type CardSectionColor = (typeof cardSectionColors)[number];
+export type CardSectionColor = (typeof cardColors)[number];
 
 interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */

package/src/components/Card/styles/config.scss

@@ -6,7 +6,7 @@ $card-base: (
   background-color: var(--color-surface-primary),
   margin-bottom: space.get(),
   border-radius: convert.to-rem(10px),
-  border: 1px solid var(--color-border-subtle),
+  border: 1px solid var(--color-border-strong),
   overflow: hidden,
 );
 

package/src/components/Expander/Expander.tsx

@@ -26,8 +26,8 @@ interface ExpanderProps {
   className?: string;
   /** Child elements */
   children?: React.ReactNode;
-  /** Additional HTML attributes */
-  [key: string]: any;
+  /** Expander takes full width of its container */
+  isFullWidth?: boolean;
 }
 
 export const Expander: React.FC<ExpanderProps> = (props) => {
@@ -39,6 +39,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     renderSummary,
     renderSummaryOpened,
     colorScheme,
+    isFullWidth,
     ...other
   } = props;
   const [expanderRef] = useStatic(ExpanderStatic);
@@ -46,6 +47,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
   const classes = cx(
     CLASS_ROOT,
     {
+      [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
     },

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

@@ -41,6 +41,13 @@
       display: none;
     }
 
+    &--fullwidth {
+      .expander__summary {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;