react-restyle-components 0.2.22 → 0.2.24

package/lib/src/core-components/atoms/button/button.module.css

@@ -0,0 +1,477 @@
+:global .theme--dark {
+  --button_color: var(--N0);
+
+  --button_color_brand_secondary: var(--B300);
+  --button_bg_brand_secondary_hover: rgb(from var(--B400) r g b / 0.24);
+
+  --button_color_danger_secondary: var(--Red);
+  --button_bg_danger_secondary_hover: rgb(from var(--R500) r g b / 0.24);
+
+  --button_color_accent_secondary: var(--Accent);
+  --button_bg_accent_secondary_hover: rgb(from var(--A500) r g b / 0.24);
+
+  --button_color_neutral_primary: var(--N0);
+  --button_color_neutral_secondary: var(--Gl200);
+  --button_bg_neutral_primary: var(--Gl600);
+  --button_bg_neutral_primary_hover: var(--Gl700);
+  --button_bg_neutral_secondary_hover: rgb(from var(--Gl400) r g b / 0.24);
+
+  --button_color_disabled: var(--Gl500);
+  --button_bg_disabled_primary: var(--Gl800);
+
+  --button_color_toggle_secondary_unchecked: var(--Gl200);
+  --button_bg_toggle_primary_unchecked: var(--Gl800);
+  --button_bg_toggle_primary_unchecked_hover: var(--Gl700);
+  --button_bg_toggle_secondary_unchecked_hover: var(--Gl600);
+  --button_color_toggle_primary_brand: var(--B300);
+  --button_color_toggle_primary_accent: var(--A400);
+}
+:global .theme--light {
+  --button_color: var(--N0);
+
+  --button_color_brand_secondary: var(--B600);
+  --button_bg_brand_secondary_hover: var(--B50);
+
+  --button_color_danger_secondary: var(--R600);
+  --button_bg_danger_secondary_hover: var(--R50);
+
+  --button_color_accent_secondary: var(--A600);
+  --button_bg_accent_secondary_hover: var(--A50);
+
+  --button_color_neutral_primary: var(--N1000);
+  --button_color_neutral_secondary: var(--N600);
+  --button_bg_neutral_primary: var(--N50);
+  --button_bg_neutral_primary_hover: var(--N100);
+  --button_bg_neutral_secondary_hover: var(--N50);
+
+  --button_color_disabled: var(--N300);
+  --button_bg_disabled_primary: var(--N50);
+  --button_color_toggle_secondary_unchecked: var(--N600);
+  --button_bg_toggle_primary_unchecked: var(--N50);
+  --button_bg_toggle_primary_unchecked_hover: var(--N100);
+  --button_bg_toggle_secondary_unchecked_hover: var(--N50);
+  --button_color_toggle_primary_brand: var(--B500);
+  --button_color_toggle_primary_accent: var(--A600);
+  --button_group_divider_color_netural_primary: var(--N200);
+}
+
+:where(.reset_button) {
+  background: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-shadow: unset;
+  user-select: none;
+}
+
+.visuallyHidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+:where(.button) {
+  border-radius: var(--button_radius, 4px);
+  flex: var(--button_flex, none);
+  display: inline-flex;
+  align-items: center;
+  justify-content: var(--button-justify-content);
+  line-height: 0;
+  background-color: var(--button_bg);
+  color: var(--button_color, inherit);
+  gap: var(--button_gap, 4px);
+  height: var(--button_height);
+  font-size: var(--button_font_size);
+  padding-left: var(--button_padding);
+  padding-right: var(--button_padding);
+  --button_icon_width: auto;
+  background-clip: padding-box;
+  font-weight: 400;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.button:where(.focus-visible:not(:disabled):focus-visible, .focus:not(:disabled):focus) {
+  box-shadow: var(--button_focus-shadow, 0 0 0 2px var(--global-focus-color));
+}
+
+.button:where(:disabled) {
+  cursor: default;
+}
+
+/* Set size of svg icon in button */
+.button :where(svg) {
+  width: var(--button_icon_size, var(--button_icon_width));
+  height: var(--button_icon_size, var(--button_icon_height));
+}
+
+/* 02: Cross-color rules */
+/* These rules apply across all color/intents */
+
+/* All secondary buttons have no BG in default state: */
+.button-level-secondary {
+  --button_bg: transparent;
+}
+
+/* 03 Color specific rules */
+/* Colors for different colors/intents */
+
+/* 03A: 'Brand' colors */
+/* Text colors */
+.button-theme-brand:not(:disabled).button-level-secondary {
+  --button_color: var(--button_color_brand_secondary);
+}
+/* Bg colors */
+.button-theme-brand:not(:disabled).button-level-primary {
+  --button_bg: var(--B500);
+}
+.button-theme-brand:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--B600);
+}
+
+.button-theme-brand:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--button_bg_brand_secondary_hover);
+}
+
+/* 03B: 'Danger' colors */
+/* Text colors */
+.button-theme-danger:not(:disabled).button-level-secondary {
+  --button_color: var(--button_color_danger_secondary);
+}
+/* bg colors */
+.button-theme-danger:not(:disabled).button-level-primary {
+  --button_bg: var(--R500);
+}
+.button-theme-danger:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--R600);
+}
+
+.button-theme-danger:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--button_bg_danger_secondary_hover);
+}
+
+/* 03C: 'Accent' colors */
+/* Text colors */
+.button-theme-accent:not(:disabled).button-level-secondary {
+  --button_color: var(--button_color_accent_secondary);
+}
+/* bg colors */
+.button-theme-accent:not(:disabled).button-level-primary {
+  --button_bg: var(--A500);
+}
+.button-theme-accent:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--A600);
+}
+.button-theme-accent:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--button_bg_accent_secondary_hover);
+}
+
+/* 03D: 'Neutral' colors */
+/* Text colors */
+.button-theme-neutral:not(:disabled).button-level-primary {
+  --button_color: var(--button_color_neutral_primary);
+}
+.button-theme-neutral:not(:disabled).button-level-secondary {
+  --button_color: var(--button_color_neutral_secondary);
+}
+/* bg colors */
+.button-theme-neutral:not(:disabled).button-level-primary {
+  --button_bg: var(--button_bg_neutral_primary);
+}
+.button-theme-neutral:not(:disabled).button-level-primary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--button_bg_neutral_primary_hover);
+}
+
+.button-theme-neutral:not(:disabled).button-level-secondary:where(:hover, [data-dropdownmenu-state='open']) {
+  --button_bg: var(--button_bg_neutral_secondary_hover);
+}
+
+.button:disabled {
+  /* text color */
+  --button_color: var(--button_color_disabled);
+}
+.button:disabled.button-level-primary {
+  /* bg color */
+  --button_bg: var(--button_bg_disabled_primary);
+}
+
+/* 05: UISize setup */
+.button-size-xl {
+  --button_font_size: 18px;
+  --button_height: 56px;
+  --button_loading_size: 56px;
+  --button_icon_height: 24px;
+  --button_padding: 20px;
+  --button_gap: 8px;
+}
+
+.button-size-l {
+  --button_font_size: 18px;
+  --button_height: 48px;
+  --button_loading_size: 24px;
+  --button_icon_height: 24px;
+  --button_padding: 16px;
+  --button_gap: 8px;
+}
+
+.button-size-m {
+  --button_font_size: 16px;
+  --button_height: 40px;
+  --button_loading_size: 20px;
+  --button_icon_height: 20px;
+  --button_padding: 12px;
+  --button_gap: 8px;
+}
+
+.button-size-s {
+  --button_font_size: 14px;
+  --button_height: 32px;
+  --button_loading_size: 16px;
+  --button_icon_height: 16px;
+  --button_padding: 8px;
+  --button_gap: 4px;
+}
+
+.button-size-xs {
+  --button_font_size: 12px;
+  --button_height: 24px;
+  --button_loading_size: 12px;
+  --button_icon_height: 12px;
+  --button_padding: 8px;
+  --button_gap: 4px;
+}
+
+.button-size-xxs {
+  --button_font_size: 12px;
+  --button_height: 20px;
+  --button_loading_size: 12px;
+  --button_icon_height: 12px;
+  --button_padding: 4px;
+  --button_gap: 2px;
+}
+
+/* 06: Size adjustments for Icon Only buttons. */
+/* The icons are a bit bigger than when it is text + icon: */
+.button-icon-only.button-size-xl {
+  --button_icon_height: 28px;
+  --button_padding: 13px;
+}
+
+.button-icon-only.button-size-l {
+  --button_icon_height: 28px;
+  --button_padding: 9px;
+}
+
+.button-icon-only.button-size-m {
+  --button_icon_height: 24px;
+  --button_padding: 7px;
+}
+
+.button-icon-only.button-size-s {
+  --button_icon_height: 20px;
+  --button_padding: 5px;
+}
+
+.button-icon-only.button-size-xs {
+  --button_icon_height: 18px;
+  --button_padding: 1.5px;
+}
+
+.button-icon-only.button-size-xxs {
+  --button_icon_height: 14px;
+  --button_padding: 1.5px;
+}
+
+.button-icon-only {
+  min-width: var(--button_height);
+  place-content: center;
+}
+
+/* Loading styles */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+:where(.loading) {
+  color: transparent;
+  pointer-events: none;
+  position: relative;
+  & > * {
+    visibility: hidden;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - var(--button_loading_size) * 0.5);
+    left: calc(50% - var(--button_loading_size) * 0.5);
+    display: block;
+    width: var(--button_loading_size);
+    aspect-ratio: 1;
+    border: calc(var(--button_loading_size) / 8) solid var(--button_color);
+    border-top-color: transparent;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: spin 1s linear infinite;
+  }
+}
+
+/* 07 LinkButton */
+/* LinkButton uses the same styles as Button but applies to an <a> element. */
+/* This rule handle some extra resets we need to do for links: */
+.linkButton {
+  text-decoration: none;
+  width: fit-content;
+}
+
+/* 08 ToggleButton */
+
+.label {
+  display: flex;
+  width: max-content;
+  &:not(:has(:disabled, .loading)) {
+    cursor: pointer;
+  }
+}
+
+/* inactive/unchecked styles: */
+
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary {
+  --button_color: var(--button_color_toggle_secondary_unchecked);
+}
+
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-brand {
+  --button_color: var(--button_color_toggle_primary_brand);
+}
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-accent {
+  --button_color: var(--button_color_toggle_primary_accent);
+}
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-danger {
+  --button_color: var(--Red);
+}
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary.button-theme-neutral {
+  --button_color: var(--N500);
+}
+
+.checkbox:not(:checked):not(:disabled) + .toggleButton {
+  --button_bg: var(--button_bg_toggle_primary_unchecked);
+}
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary {
+  --button_bg: transparent;
+}
+
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-primary:hover {
+  --button_bg: var(--button_bg_toggle_primary_unchecked_hover);
+}
+.checkbox:not(:checked):not(:disabled) + .toggleButton.button-level-secondary:hover {
+  --button_bg: var(--button_bg_toggle_secondary_unchecked_hover);
+}
+/* disabled checkbox styles: */
+.checkbox:disabled + .toggleButton {
+  cursor: default;
+  pointer-events: none;
+  /* text color */
+  --button_color: var(--button_color_disabled);
+}
+
+.checkbox:disabled + .toggleButton.button-level-primary {
+  /* bg color */
+  --button_bg: var(--button_bg_disabled_primary);
+}
+
+.checkbox:where(.focus-visible:not(:disabled):focus-visible, .focus:not(:disabled):focus) + .toggleButton {
+  box-shadow: var(--button_focus-shadow, 0 0 0 2px var(--global-focus-color));
+}
+
+.group {
+  display: flex;
+  border-radius: var(--button_radius, 4px);
+
+  &:where(.isverticalhug) {
+    height: max-content;
+  }
+  &:where(.ishorizontalhug) {
+    width: max-content;
+  }
+  &:where(.ishorizontalfill, .isverticalfill) {
+    --button_flex: 1 0 auto;
+  }
+  &:where(.ishorizontal.isverticalfill) {
+    & > * {
+      --button_height: auto;
+    }
+  }
+
+  &:where(.ishorizontal) {
+    & > .button:not(:last-child),
+    & > *:not(:last-child) .button {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    & > .button:not(:first-child),
+    & > *:not(:first-child) .button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      &::before {
+        width: 1px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+  &:where(.isvertical) {
+    flex-direction: column;
+    & > .button:not(:last-child),
+    & > *:not(:last-child) .button {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    & > .button:not(:first-child),
+    & > *:not(:first-child) .button {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      &::before {
+        height: 1px;
+        right: 0;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  & > .button:not(:first-child),
+  & > *:not(:first-child) .button {
+    position: relative;
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      background-color: color-mix(in srgb, var(--button_bg) 70%, white);
+      align-self: stretch;
+    }
+    &.button-theme-neutral.button-level-primary::before {
+      background-color: var(
+        --button_group_divider_color_netural_primary,
+        color-mix(in srgb, var(--button_bg) 70%, white)
+      );
+    }
+    &.button-level-secondary::before {
+      background-color: rgb(from var(--global-text-primary) r g b / 0.25);
+    }
+  }
+
+  &:has(*:focus-visible, [data-dropdownmenu-state='open']) {
+    box-shadow: var(--button_focus-shadow, 0 0 0 2px rgb(from var(--global-focus-color) r g b / 0.3));
+  }
+}

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    parameters: {
+        componentSubtitle: string;
+    };
+    component: ({ children, orientation, horizontalSizing, verticalSizing, className, }: {
+        children: React.ReactNode;
+        orientation?: "horizontal" | "vertical" | undefined;
+        horizontalSizing?: "fill" | "hug" | undefined;
+        verticalSizing?: "fill" | "hug" | undefined;
+        className?: string | undefined;
+    }) => React.JSX.Element;
+    tags: string[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        children: React.ReactNode;
+        orientation?: "horizontal" | "vertical" | undefined;
+        horizontalSizing?: "fill" | "hug" | undefined;
+        verticalSizing?: "fill" | "hug" | undefined;
+        className?: string | undefined;
+    }>) => React.JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * At its simplest you can just wrap any `Button` elements in a `ButtonGroup`.
+ *
+ * All props for button scale, variant, etc stay on the Button.
+ * You should use the same scale for all buttons in a group but could mix and match variants and levels.
+ */
+export declare const Basic: Story;
+/**
+ * If only a single `Button` is passed in, it will be visually the same as not wrapping in a `ButtonGroup`.
+ */
+export declare const BasicOneButton: Story;
+/**
+ * To creat a split button you would add a `DropdownMenu` as the last child. Its trigger should be a `Button`.
+ */
+/**
+ * ButtonGroups can be passed `orientation="vertical"` to stack buttons vertically.
+ */
+export declare const Vertical: Story;
+/**
+ * Vertical ButtonGroups can also contain a `DropdownMenu`.
+ */
+/**
+ * ButtonGroups also work with LinkButtons and ToggleButtons.
+ *
+ * However ToggleButton styling is not currently ideal as the divider is hard to see.
+ * Also note that ButtonGroup with ToggleButtons is not the same as a ToggleGroup. The former will allow multiple buttons to be active at once, whereas the latter will only allow one button to be active at a time.
+ */
+export declare const FillModes: Story;