@moodlehq/design-system 2.0.0 → 2.1.0

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,14 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { default as React } from 'react';
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: string;
+    dismissible?: boolean;
+    heading?: React.ReactNode;
+    showIcon?: boolean;
+    icon?: IconProp;
+    show?: boolean;
+    defaultShow?: boolean;
+    closeLabel?: string;
+    onClose?: () => void;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

package/dist/components/button/Button.d.ts

@@ -1,8 +1,10 @@
-import { ButtonProps as RBButtonProps } from 'react-bootstrap';
-export interface ButtonProps extends RBButtonProps {
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label: string;
     variant?: string;
-    disabled?: boolean;
     size?: 'sm' | 'lg';
+    iconOnly?: boolean;
+    icon?: IconProp;
 }
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: ({ label, variant, size, iconOnly, icon, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { default as React } from 'react';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'icon'> {
+    icon: IconProp;
+}
+export declare const Icon: React.FC<IconProps>;

package/dist/components/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/components/index.d.ts

@@ -1,2 +1,6 @@
+export { Alert } from './alert';
+export type { AlertProps } from './alert';
 export { Button } from './button';
 export type { ButtonProps } from './button';
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/dist/index.css

@@ -486,3 +486,131 @@
   font-size: var(--mds-font-size-paragraph-lead);
   line-height: var(--mds-line-height-paragraph-default);
 }
+/**
+  * Icon-only variant
+  */
+.mds-btn.btn.mds-btn-icon-only {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--mds-scale-1000);
+  min-width: var(--mds-scale-1000);
+  padding: var(--mds-spacing-sm);
+}
+.mds-btn.btn.btn-sm.mds-btn-icon-only {
+  min-height: var(--mds-scale-800);
+  min-width: var(--mds-scale-800);
+  padding: var(--mds-spacing-xs);
+}
+.mds-btn.btn.btn-lg.mds-btn-icon-only {
+  min-height: var(--mds-scale-1200);
+  min-width: var(--mds-scale-1200);
+  padding: var(--mds-spacing-md);
+}
+.mds-btn .mds-btn-icon-only-icon {
+  font-size: var(--mds-icons-md);
+}
+.mds-btn.btn.btn-sm .mds-btn-icon-only-icon {
+  font-size: var(--mds-icons-sm);
+}
+.mds-btn.btn.btn-lg .mds-btn-icon-only-icon {
+  font-size: var(--mds-icons-lg);
+}
+.mds-alert.alert {
+  --mds-alert-bg: var(--mds-bg-feedback-success-subtle);
+  --mds-alert-border: var(--mds-border-feedback-success);
+  --mds-alert-text: var(--mds-text-feedback-success);
+
+  align-items: flex-start;
+  background-color: var(--mds-alert-bg);
+  border: var(--mds-stroke-weight-sm) solid var(--mds-alert-border);
+  border-radius: var(--mds-border-radius-lg);
+  color: var(--mds-alert-text);
+  display: flex;
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-default);
+  gap: var(--mds-spacing-xxs);
+  line-height: var(--mds-line-height-paragraph-default);
+  margin-bottom: 0;
+  padding: var(--mds-spacing-sm);
+}
+.mds-alert.alert.alert-info {
+  --mds-alert-bg: var(--mds-bg-feedback-info-subtle);
+  --mds-alert-border: var(--mds-border-feedback-info);
+  --mds-alert-text: var(--mds-text-feedback-info);
+}
+.mds-alert.alert.alert-warning {
+  --mds-alert-bg: var(--mds-bg-feedback-warning-subtle);
+  --mds-alert-border: var(--mds-border-feedback-warning);
+  --mds-alert-text: var(--mds-text-feedback-warning);
+}
+.mds-alert.alert.alert-danger {
+  --mds-alert-bg: var(--mds-bg-feedback-danger-subtle);
+  --mds-alert-border: var(--mds-border-feedback-danger);
+  --mds-alert-text: var(--mds-text-feedback-danger);
+}
+.mds-alert .mds-alert-icon-wrapper {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  padding-top: var(--mds-spacing-xxs);
+  width: var(--mds-icons-md);
+}
+.mds-alert .mds-alert-icon {
+  color: var(--mds-alert-text);
+  font-size: var(--mds-icons-sm);
+}
+.mds-alert .mds-alert-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.mds-alert .mds-alert-heading {
+  color: var(--mds-alert-text);
+  font-size: var(--mds-font-size-paragraph-lead);
+  font-weight: var(--mds-font-weight-regular);
+  line-height: var(--mds-line-height-paragraph-default);
+  margin: 0 0 var(--mds-spacing-xxs);
+}
+.mds-alert .mds-alert-body {
+  color: var(--mds-alert-text);
+}
+.mds-alert .mds-alert-body > :last-child {
+  margin-bottom: 0;
+}
+.mds-alert .mds-alert-body a,
+.mds-alert .mds-alert-body .alert-link {
+  color: inherit;
+  font-weight: var(--mds-font-weight-regular);
+  text-decoration: underline;
+}
+.mds-alert .mds-alert-body .btn,
+.mds-alert .mds-alert-body button {
+  color: inherit;
+}
+.mds-alert.alert-dismissible {
+  padding-right: var(--mds-spacing-sm);
+}
+.mds-alert .mds-alert-close.btn-close {
+  color: var(--mds-alert-text);
+  margin: 0;
+  opacity: 1;
+  padding: var(--mds-spacing-xxs);
+}
+.mds-alert .mds-alert-close.btn-close:hover {
+  opacity: 0.7;
+}
+.mds-alert .mds-alert-close.btn-close:focus {
+  box-shadow: 0 0 0 var(--mds-stroke-weight-md) var(--mds-focus-default);
+}
+.mds-alert .mds-alert-close.btn-close:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.mds-alert .mds-alert-close.btn-close:focus-visible {
+  box-shadow: 0 0 0 var(--mds-stroke-weight-md) var(--mds-focus-default);
+}
+.mds-icon {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+}